]>
Commit | Line | Data |
---|---|---|
3332bebe | 1 | /*\r |
317f8f8f | 2 | Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.\r |
3332bebe IB |
3 | For licensing, see LICENSE.md or http://ckeditor.com/license\r |
4 | */\r | |
5 | \r | |
6 | /*\r | |
7 | toolbar.css (part of editor.css)\r | |
8 | ==================================\r | |
9 | \r | |
10 | This files styles the CKEditor toolbar and its buttons. For toolbar combo\r | |
11 | styles, check richcombo.css.\r | |
12 | \r | |
13 | The toolbar is rendered as a big container (called toolbox), which contains\r | |
14 | smaller "toolbars". Each toolbar represents a group of items that cannot be\r | |
15 | separated. The following is the visual representation of the toolbox.\r | |
16 | \r | |
17 | +-- .cke_toolbox ----------------------------------------------------------+\r | |
18 | | +-- .cke_toolbar --+ +-- .cke_toolbar --+ ... +-- .cke_toolbar_break --+ |\r | |
19 | | | | | | | | |\r | |
20 | | +------------------+ +------------------+ +------------------------+ |\r | |
21 | | +-- .cke_toolbar --+ +-- .cke_toolbar --+ ... |\r | |
22 | | | | | | |\r | |
23 | | +------------------+ +------------------+ |\r | |
24 | +--------------------------------------------------------------------------+\r | |
25 | \r | |
26 | The following instead is the visual representation of a single toolbar:\r | |
27 | \r | |
28 | +-- .cke_toolbar ----------------------------------------------------------------+\r | |
29 | | +-- .cke_toolbar_start --+ +-- .cke_toolgroup (*) --+ +-- .cke_toolbar_end --+ |\r | |
30 | | | | | | | | |\r | |
31 | | +------------------------+ +------------------------+ +----------------------+ |\r | |
32 | +--------------------------------------------------------------------------------+\r | |
33 | (*) .cke_toolgroup is available only when the toolbar items can be grouped\r | |
34 | (buttons). If the items can't be group (combos), this box is not available\r | |
35 | and the items are rendered straight in that place.\r | |
36 | \r | |
37 | This file also styles toolbar buttons, which are rendered inside the above\r | |
38 | .cke_toolgroup containers. This is the visual representation of a button:\r | |
39 | \r | |
40 | +-- .cke_button -------------------------------------+\r | |
41 | | +-- .cke_button_icon --+ +-- .cke_button_label --+ |\r | |
42 | | | | | | |\r | |
43 | | +----------------------+ +-----------------------+ |\r | |
44 | +----------------------------------------------------+\r | |
45 | \r | |
46 | Special outer level classes used in this file:\r | |
47 | \r | |
48 | .cke_hc: Available when the editor is rendered on "High Contrast".\r | |
49 | .cke_rtl: Available when the editor UI is on RTL.\r | |
50 | */\r | |
51 | \r | |
52 | /* The box that holds each toolbar. */\r | |
53 | .cke_toolbar\r | |
54 | {\r | |
55 | float: left;\r | |
56 | }\r | |
57 | \r | |
58 | .cke_rtl .cke_toolbar\r | |
59 | {\r | |
60 | float: right;\r | |
61 | }\r | |
62 | \r | |
63 | /* The box that holds buttons. */\r | |
64 | .cke_toolgroup\r | |
65 | {\r | |
66 | float: left;\r | |
67 | margin: 0 6px 5px 0;\r | |
68 | border: 1px solid #a6a6a6;\r | |
69 | border-bottom-color: #979797;\r | |
70 | \r | |
71 | border-radius: 3px;\r | |
72 | \r | |
73 | 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 | |
74 | \r | |
75 | background: #e4e4e4;\r | |
76 | background-image: linear-gradient(to bottom, #ffffff, #e4e4e4);\r | |
77 | filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ffffff', endColorstr='#e4e4e4');\r | |
78 | }\r | |
79 | \r | |
80 | .cke_hc .cke_toolgroup\r | |
81 | {\r | |
82 | border: 0;\r | |
83 | margin-right: 10px;\r | |
84 | margin-bottom: 10px;\r | |
85 | }\r | |
86 | \r | |
87 | .cke_rtl .cke_toolgroup\r | |
88 | {\r | |
89 | float: right;\r | |
90 | margin-left: 6px;\r | |
91 | margin-right: 0;\r | |
92 | }\r | |
93 | \r | |
94 | /* A toolbar button . */\r | |
95 | a.cke_button\r | |
96 | {\r | |
97 | display: inline-block;\r | |
98 | height: 18px;\r | |
99 | padding: 4px 6px;\r | |
100 | outline: none;\r | |
101 | cursor: default;\r | |
102 | float: left;\r | |
103 | border: 0;\r | |
104 | }\r | |
105 | \r | |
106 | .cke_ltr .cke_button:last-child,\r | |
107 | .cke_rtl .cke_button:first-child\r | |
108 | {\r | |
109 | /* Don't distort parent's rounded border. */\r | |
110 | border-radius: 0 2px 2px 0;\r | |
111 | }\r | |
112 | \r | |
113 | .cke_ltr .cke_button:first-child,\r | |
114 | .cke_rtl .cke_button:last-child\r | |
115 | {\r | |
116 | /* Don't distort parent's rounded border. */\r | |
117 | border-radius: 2px 0 0 2px;\r | |
118 | }\r | |
119 | \r | |
120 | .cke_rtl .cke_button\r | |
121 | {\r | |
122 | float: right;\r | |
123 | }\r | |
124 | \r | |
125 | .cke_hc .cke_button\r | |
126 | {\r | |
127 | border: 1px solid black;\r | |
128 | \r | |
129 | /* Compensate the added border */\r | |
130 | padding: 3px 5px;\r | |
131 | margin: -2px 4px 0 -2px;\r | |
132 | }\r | |
133 | \r | |
134 | /* This class is applied to the button when it is "active" (pushed).\r | |
135 | This style indicates that the feature associated with the button is active\r | |
136 | i.e. currently writing in bold or when spell checking is enabled. */\r | |
137 | a.cke_button_on\r | |
138 | {\r | |
139 | box-shadow: 0 1px 5px rgba(0,0,0,.6) inset, 0 1px 0 rgba(0,0,0,.2);\r | |
140 | \r | |
141 | background: #b5b5b5;\r | |
142 | background-image: linear-gradient(to bottom, #aaa, #cacaca);\r | |
143 | filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#aaaaaa', endColorstr='#cacaca');\r | |
144 | }\r | |
145 | \r | |
146 | .cke_hc .cke_button_on,\r | |
147 | .cke_hc a.cke_button_off:hover,\r | |
148 | .cke_hc a.cke_button_off:focus,\r | |
149 | .cke_hc a.cke_button_off:active,\r | |
150 | .cke_hc a.cke_button_disabled:hover,\r | |
151 | .cke_hc a.cke_button_disabled:focus,\r | |
152 | .cke_hc a.cke_button_disabled:active\r | |
153 | {\r | |
154 | border-width: 3px;\r | |
155 | \r | |
156 | /* Compensate the border change */\r | |
157 | padding: 1px 3px;\r | |
158 | }\r | |
159 | \r | |
160 | /* This class is applied to the button when the feature associated with the\r | |
161 | button cannot be used (grayed-out).\r | |
162 | i.e. paste button remains disabled when there is nothing in the clipboard to\r | |
163 | be pasted. */\r | |
164 | .cke_button_disabled .cke_button_icon\r | |
165 | {\r | |
166 | opacity: 0.3;\r | |
167 | }\r | |
168 | \r | |
169 | .cke_hc .cke_button_disabled\r | |
170 | {\r | |
171 | opacity: 0.5;\r | |
172 | }\r | |
173 | \r | |
174 | a.cke_button_on:hover,\r | |
175 | a.cke_button_on:focus,\r | |
176 | a.cke_button_on:active\r | |
177 | {\r | |
178 | box-shadow: 0 1px 6px rgba(0,0,0,.7) inset, 0 1px 0 rgba(0,0,0,.2);\r | |
179 | }\r | |
180 | \r | |
181 | a.cke_button_off:hover,\r | |
182 | a.cke_button_off:focus,\r | |
183 | a.cke_button_off:active,\r | |
184 | a.cke_button_disabled:hover,\r | |
185 | a.cke_button_disabled:focus,\r | |
186 | a.cke_button_disabled:active\r | |
187 | {\r | |
188 | box-shadow: 0 0 1px rgba(0,0,0,.3) inset;\r | |
189 | \r | |
190 | background: #ccc;\r | |
191 | background-image: linear-gradient(to bottom, #f2f2f2, #ccc);\r | |
192 | filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');\r | |
193 | }\r | |
194 | \r | |
195 | /* The icon which is a visual representation of the button. */\r | |
196 | .cke_button_icon\r | |
197 | {\r | |
198 | cursor: inherit;\r | |
199 | background-repeat: no-repeat;\r | |
200 | margin-top: 1px;\r | |
201 | width: 16px;\r | |
202 | height: 16px;\r | |
203 | float: left;\r | |
204 | display: inline-block;\r | |
205 | }\r | |
206 | \r | |
207 | .cke_rtl .cke_button_icon\r | |
208 | {\r | |
209 | float: right;\r | |
210 | }\r | |
211 | \r | |
212 | .cke_hc .cke_button_icon\r | |
213 | {\r | |
214 | display: none;\r | |
215 | }\r | |
216 | \r | |
217 | /* The label of the button that stores the name of the feature. By default,\r | |
218 | labels are invisible. They can be revealed on demand though. */\r | |
219 | .cke_button_label\r | |
220 | {\r | |
221 | display: none;\r | |
222 | padding-left: 3px;\r | |
223 | margin-top: 1px;\r | |
224 | line-height: 17px;\r | |
225 | vertical-align: middle;\r | |
226 | float: left;\r | |
227 | cursor: default;\r | |
228 | color: #474747;\r | |
229 | text-shadow: 0 1px 0 rgba(255,255,255,.5);\r | |
230 | }\r | |
231 | \r | |
232 | .cke_rtl .cke_button_label\r | |
233 | {\r | |
234 | padding-right: 3px;\r | |
235 | padding-left: 0;\r | |
236 | float: right;\r | |
237 | }\r | |
238 | \r | |
239 | .cke_hc .cke_button_label\r | |
240 | {\r | |
241 | padding: 0;\r | |
242 | display: inline-block;\r | |
243 | font-size: 12px;\r | |
244 | }\r | |
245 | \r | |
246 | /* The small arrow available on buttons that can be expanded\r | |
247 | (e.g. the color buttons). */\r | |
248 | .cke_button_arrow\r | |
249 | {\r | |
250 | /* Arrow in CSS */\r | |
251 | display: inline-block;\r | |
252 | margin: 8px 0 0 1px;\r | |
253 | width: 0;\r | |
254 | height: 0;\r | |
255 | cursor: default;\r | |
256 | vertical-align: top;\r | |
257 | border-left: 3px solid transparent;\r | |
258 | border-right: 3px solid transparent;\r | |
259 | border-top: 3px solid #474747;\r | |
260 | }\r | |
261 | \r | |
262 | .cke_rtl .cke_button_arrow\r | |
263 | {\r | |
264 | margin-right: 5px;\r | |
265 | margin-left: 0;\r | |
266 | }\r | |
267 | \r | |
268 | .cke_hc .cke_button_arrow\r | |
269 | {\r | |
270 | font-size: 10px;\r | |
271 | margin: 3px -2px 0 3px;\r | |
272 | width: auto;\r | |
273 | border: 0;\r | |
274 | }\r | |
275 | \r | |
276 | /* The vertical separator which is used within a single toolbar to split\r | |
277 | buttons into sub-groups. */\r | |
278 | .cke_toolbar_separator\r | |
279 | {\r | |
280 | float: left;\r | |
281 | background-color: #c0c0c0;\r | |
282 | background-color: rgba(0,0,0,.2);\r | |
283 | margin: 5px 2px 0;\r | |
284 | height: 18px;\r | |
285 | width: 1px;\r | |
286 | \r | |
287 | box-shadow: 1px 0 1px rgba(255,255,255,.5);\r | |
288 | }\r | |
289 | \r | |
290 | .cke_rtl .cke_toolbar_separator\r | |
291 | {\r | |
292 | float: right;\r | |
293 | \r | |
294 | box-shadow: -1px 0 1px rgba(255,255,255,.1);\r | |
295 | }\r | |
296 | \r | |
297 | .cke_hc .cke_toolbar_separator\r | |
298 | {\r | |
299 | width: 0;\r | |
300 | border-left: 1px solid;\r | |
301 | margin: 1px 5px 0 0px;\r | |
302 | }\r | |
303 | \r | |
304 | /* The dummy element that breaks toolbars.\r | |
305 | Once it is placed, the very next toolbar is moved to the new row. */\r | |
306 | .cke_toolbar_break\r | |
307 | {\r | |
308 | display: block;\r | |
309 | clear: left;\r | |
310 | }\r | |
311 | \r | |
312 | .cke_rtl .cke_toolbar_break\r | |
313 | {\r | |
314 | clear: right;\r | |
315 | }\r | |
316 | \r | |
317 | /* The button, which when clicked hides (collapses) all the toolbars. */\r | |
318 | a.cke_toolbox_collapser\r | |
319 | {\r | |
320 | width: 12px;\r | |
321 | height: 11px;\r | |
322 | float: right;\r | |
323 | margin: 11px 0 0;\r | |
324 | font-size: 0;\r | |
325 | cursor: default;\r | |
326 | text-align: center;\r | |
327 | \r | |
328 | border: 1px solid #a6a6a6;\r | |
329 | border-bottom-color: #979797;\r | |
330 | \r | |
331 | border-radius: 3px;\r | |
332 | \r | |
333 | 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 | |
334 | \r | |
335 | background: #e4e4e4;\r | |
336 | background-image: linear-gradient(to bottom, #ffffff, #e4e4e4);\r | |
337 | filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ffffff', endColorstr='#e4e4e4');\r | |
338 | }\r | |
339 | \r | |
340 | .cke_toolbox_collapser:hover\r | |
341 | {\r | |
342 | background: #ccc;\r | |
343 | background-image: linear-gradient(to bottom, #f2f2f2, #ccc);\r | |
344 | filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');\r | |
345 | }\r | |
346 | \r | |
347 | .cke_toolbox_collapser.cke_toolbox_collapser_min\r | |
348 | {\r | |
349 | margin: 0 2px 4px;\r | |
350 | }\r | |
351 | \r | |
352 | .cke_rtl .cke_toolbox_collapser\r | |
353 | {\r | |
354 | float: left;\r | |
355 | }\r | |
356 | \r | |
357 | /* The CSS arrow, which belongs to the toolbar collapser. */\r | |
358 | .cke_toolbox_collapser .cke_arrow\r | |
359 | {\r | |
360 | display: inline-block;\r | |
361 | \r | |
362 | /* Pure CSS Arrow */\r | |
363 | height: 0;\r | |
364 | width: 0;\r | |
365 | font-size: 0;\r | |
366 | margin-top: 1px;\r | |
367 | border-left: 3px solid transparent;\r | |
368 | border-right: 3px solid transparent;\r | |
369 | border-bottom: 3px solid #474747;\r | |
370 | border-top: 3px solid transparent;\r | |
371 | }\r | |
372 | \r | |
373 | .cke_toolbox_collapser.cke_toolbox_collapser_min .cke_arrow\r | |
374 | {\r | |
375 | margin-top: 4px;\r | |
376 | border-bottom-color: transparent;\r | |
377 | border-top-color: #474747;\r | |
378 | }\r | |
379 | \r | |
380 | .cke_hc .cke_toolbox_collapser .cke_arrow\r | |
381 | {\r | |
382 | font-size: 8px;\r | |
383 | width: auto;\r | |
384 | border: 0;\r | |
385 | margin-top: 0;\r | |
386 | margin-right: 2px;\r | |
387 | }\r |