1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
|
/*
Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/*
mainui.css (part of editor.css)
=================================
This file styles the basic structure of the CKEditor user interface - the box
that holds everything.
CKEditor offers two main editing modes. The main UI blocks that compose these
modes are:
For "Theme UI" mode, the one most generally used:
+-- .cke_chrome ----------------------+
|+-- .cke_inner ---------------------+|
|| +-- .cke_top -------------------+ ||
|| | | ||
|| +-------------------------------+ ||
|| +-- .cke_contents --------------+ ||
|| | | ||
|| +-------------------------------+ ||
|| +-- .cke_bottom ----------------+ ||
|| | | ||
|| +-------------------------------+ ||
|+-----------------------------------+|
+-------------------------------------+
For "Inline Editing" mode:
+-- .cke_chrome .cke_float------------+
|+-- .cke_inner ---------------------+|
|| +-- .cke_top -------------------+ ||
|| | | ||
|| +-------------------------------+ ||
|+-----------------------------------+|
+-------------------------------------+
Special outer level classes used in this file:
.cke_hc: Available when the editor is rendered on "High Contrast".
*/
/* The outer boundary of the interface. */
.cke_chrome
{
/* This is <span>, so transform it into a block.*/
display: block;
border: 1px solid #b6b6b6;
padding: 0;
box-shadow: 0 0 3px rgba(0,0,0,.15);
}
/* The inner boundary of the interface. */
.cke_inner
{
/* This is <span>, so transform it into a block.*/
display: block;
-webkit-touch-callout: none;
background: #fff;
padding: 0;
}
/* Added to the outer boundary of the UI when in inline editing,
when the UI is floating. */
.cke_float
{
/* Make white the space between the outer and the inner borders. */
border: none;
}
.cke_float .cke_inner
{
/* As we don't have blocks following top (toolbar) we suppress the padding
as the toolbar defines its own margin. */
padding-bottom: 0;
}
/* Make the main spaces enlarge to hold potentially floated content. */
.cke_top,
.cke_contents,
.cke_bottom
{
/* These are <span>s, so transform them into blocks.*/
display: block;
/* Ideally this should be "auto", but it shows scrollbars in IE7. */
overflow: hidden;
}
.cke_top
{
/*border: 1px solid #b2b2b2;*/
border-bottom: 1px solid #b6b6b6;
padding: 6px 8px 2px;
/* Allow breaking toolbars when in a narrow editor. (#9947) */
white-space: normal;
box-shadow: 0 1px 0 #fff inset;
background: #cfd1cf;
background-image: linear-gradient(to bottom, #f5f5f5, #cfd1cf);
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#f5f5f5', endColorstr='#cfd1cf');
}
.cke_float .cke_top
{
border: 1px solid #b6b6b6;
border-bottom-color: #999;
}
.cke_bottom
{
padding: 6px 8px 2px;
position: relative;
border-top: 1px solid #bfbfbf;
box-shadow: 0 1px 0 #fff inset;
background: #cfd1cf;
background-image: linear-gradient(to bottom, #ebebeb, #cfd1cf);
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ebebeb', endColorstr='#cfd1cf');
}
/* On iOS we need to manually enable scrolling in the contents block. (#9945) */
.cke_browser_ios .cke_contents
{
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* The resizer is the small UI element that is rendered at the bottom right
part of the editor. It makes is possible to resize the editor UI. */
.cke_resizer
{
/* To avoid using images for the resizer, we create a small triangle,
using some CSS magic. */
width: 0;
height: 0;
overflow: hidden;
width: 0;
height: 0;
overflow: hidden;
border-width: 10px 10px 0 0;
border-color: transparent #666 transparent transparent;
border-style: dashed solid dashed dashed;
font-size: 0;
vertical-align: bottom;
margin-top: 6px;
/* A margin in case of no other element in the same container
to keep a distance to the bottom edge. */
margin-bottom: 2px;
box-shadow: 0 1px 0 rgba(255,255,255,.3);
}
.cke_hc .cke_resizer
{
font-size: 15px;
width: auto;
height: auto;
border-width: 0;
}
.cke_resizer_ltr
{
cursor: se-resize;
float: right;
margin-right: -4px;
}
/* This class is added in RTL mode. This is a special case for the resizer
(usually the .cke_rtl class is used), because it may not necessarily be in
RTL mode if the main UI is RTL. It depends instead on the context where the
editor is inserted on. */
.cke_resizer_rtl
{
border-width: 10px 0 0 10px;
border-color: transparent transparent transparent #A5A5A5;
border-style: dashed dashed dashed solid;
cursor: sw-resize;
float: left;
margin-left: -4px;
right: auto;
}
/* The editing area (where users type) can be rendered as an editable <div>
element (e.g. divarea plugin). In that case, this is the class applied to
that element. */
.cke_wysiwyg_div
{
display: block;
height: 100%;
overflow: auto;
padding: 0 8px;
outline-style: none;
box-sizing: border-box;
}
|
