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