2 Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
3 For licensing, see LICENSE.md or http://ckeditor.com/license
7 toolbar.css (part of editor.css)
8 ==================================
10 This files styles the CKEditor toolbar and its buttons. For toolbar combo
11 styles, check richcombo.css.
13 The toolbar is rendered as a big container (called toolbox), which contains
14 smaller "toolbars". Each toolbar represents a group of items that cannot be
15 separated. The following is the visual representation of the toolbox.
17 +-- .cke_toolbox ----------------------------------------------------------+
18 | +-- .cke_toolbar --+ +-- .cke_toolbar --+ ... +-- .cke_toolbar_break --+ |
20 | +------------------+ +------------------+ +------------------------+ |
21 | +-- .cke_toolbar --+ +-- .cke_toolbar --+ ... |
23 | +------------------+ +------------------+ |
24 +--------------------------------------------------------------------------+
26 The following instead is the visual representation of a single toolbar:
28 +-- .cke_toolbar ----------------------------------------------------------------+
29 | +-- .cke_toolbar_start --+ +-- .cke_toolgroup (*) --+ +-- .cke_toolbar_end --+ |
31 | +------------------------+ +------------------------+ +----------------------+ |
32 +--------------------------------------------------------------------------------+
33 (*) .cke_toolgroup is available only when the toolbar items can be grouped
34 (buttons). If the items can't be group (combos), this box is not available
35 and the items are rendered straight in that place.
37 This file also styles toolbar buttons, which are rendered inside the above
38 .cke_toolgroup containers. This is the visual representation of a button:
40 +-- .cke_button -------------------------------------+
41 | +-- .cke_button_icon --+ +-- .cke_button_label --+ |
43 | +----------------------+ +-----------------------+ |
44 +----------------------------------------------------+
46 Special outer level classes used in this file:
48 .cke_hc: Available when the editor is rendered on "High Contrast".
49 .cke_rtl: Available when the editor UI is on RTL.
52 /* The box that holds each toolbar. */
63 /* The box that holds buttons. */
68 border: 1px solid
#a6a6a6;
69 border-bottom-color: #979797;
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
;
76 background-image: linear-gradient
(to bottom
, #ffffff, #e4e4e4);
77 filter: progid:DXImageTransform
.Microsoft
.gradient
(gradientType
=0, startColorstr
='#ffffff', endColorstr
='#e4e4e4');
80 .cke_hc
.cke_toolgroup
87 .cke_rtl
.cke_toolgroup
94 /* A toolbar button . */
97 display: inline-block
;
106 .cke_ltr
.cke_button:last-child
,
107 .cke_rtl
.cke_button:first-child
109 /* Don't distort parent's rounded border. */
110 border-radius: 0 2px 2px 0;
113 .cke_ltr
.cke_button:first-child
,
114 .cke_rtl
.cke_button:last-child
116 /* Don't distort parent's rounded border. */
117 border-radius: 2px 0 0 2px;
127 border: 1px solid black
;
129 /* Compensate the added border */
131 margin: -2px 4px 0 -2px;
134 /* This class is applied to the button when it is "active" (pushed).
135 This style indicates that the feature associated with the button is active
136 i.e. currently writing in bold or when spell checking is enabled. */
139 box-shadow: 0 1px 5px rgba
(0,0,0,.6) inset
, 0 1px 0 rgba
(0,0,0,.2);
142 background-image: linear-gradient
(to bottom
, #aaa, #cacaca);
143 filter: progid:DXImageTransform
.Microsoft
.gradient
(gradientType
=0, startColorstr
='#aaaaaa', endColorstr
='#cacaca');
146 .cke_hc
.cke_button_on
,
147 .cke_hc a
.cke_button_off:hover
,
148 .cke_hc a
.cke_button_off:focus
,
149 .cke_hc a
.cke_button_off:active
,
150 .cke_hc a
.cke_button_disabled:hover
,
151 .cke_hc a
.cke_button_disabled:focus
,
152 .cke_hc a
.cke_button_disabled:active
156 /* Compensate the border change */
160 /* This class is applied to the button when the feature associated with the
161 button cannot be used (grayed-out).
162 i.e. paste button remains disabled when there is nothing in the clipboard to
164 .cke_button_disabled
.cke_button_icon
169 .cke_hc
.cke_button_disabled
174 a
.cke_button_on:hover
,
175 a
.cke_button_on:focus
,
176 a
.cke_button_on:active
178 box-shadow: 0 1px 6px rgba
(0,0,0,.7) inset
, 0 1px 0 rgba
(0,0,0,.2);
181 a
.cke_button_off:hover
,
182 a
.cke_button_off:focus
,
183 a
.cke_button_off:active
,
184 a
.cke_button_disabled:hover
,
185 a
.cke_button_disabled:focus
,
186 a
.cke_button_disabled:active
188 box-shadow: 0 0 1px rgba
(0,0,0,.3) inset
;
191 background-image: linear-gradient
(to bottom
, #f2f2f2, #ccc);
192 filter: progid:DXImageTransform
.Microsoft
.gradient
(gradientType
=0, startColorstr
='#f2f2f2', endColorstr
='#cccccc');
195 /* The icon which is a visual representation of the button. */
199 background-repeat: no-repeat
;
204 display: inline-block
;
207 .cke_rtl
.cke_button_icon
212 .cke_hc
.cke_button_icon
217 /* The label of the button that stores the name of the feature. By default,
218 labels are invisible. They can be revealed on demand though. */
225 vertical-align: middle
;
229 text-shadow: 0 1px 0 rgba
(255,255,255,.5);
232 .cke_rtl
.cke_button_label
239 .cke_hc
.cke_button_label
242 display: inline-block
;
246 /* The small arrow available on buttons that can be expanded
247 (e.g. the color buttons). */
251 display: inline-block
;
257 border-left: 3px solid transparent
;
258 border-right: 3px solid transparent
;
259 border-top: 3px solid
#474747;
262 .cke_rtl
.cke_button_arrow
268 .cke_hc
.cke_button_arrow
271 margin: 3px -2px 0 3px;
276 /* The vertical separator which is used within a single toolbar to split
277 buttons into sub-groups. */
278 .cke_toolbar_separator
281 background-color: #c0c0c0;
282 background-color: rgba
(0,0,0,.2);
287 box-shadow: 1px 0 1px rgba
(255,255,255,.5);
290 .cke_rtl
.cke_toolbar_separator
294 box-shadow: -1px 0 1px rgba
(255,255,255,.1);
297 .cke_hc
.cke_toolbar_separator
300 border-left: 1px solid
;
301 margin: 1px 5px 0 0px;
304 /* The dummy element that breaks toolbars.
305 Once it is placed, the very next toolbar is moved to the new row. */
312 .cke_rtl
.cke_toolbar_break
317 /* The button, which when clicked hides (collapses) all the toolbars. */
318 a
.cke_toolbox_collapser
328 border: 1px solid
#a6a6a6;
329 border-bottom-color: #979797;
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
;
336 background-image: linear-gradient
(to bottom
, #ffffff, #e4e4e4);
337 filter: progid:DXImageTransform
.Microsoft
.gradient
(gradientType
=0, startColorstr
='#ffffff', endColorstr
='#e4e4e4');
340 .cke_toolbox_collapser:hover
343 background-image: linear-gradient
(to bottom
, #f2f2f2, #ccc);
344 filter: progid:DXImageTransform
.Microsoft
.gradient
(gradientType
=0, startColorstr
='#f2f2f2', endColorstr
='#cccccc');
347 .cke_toolbox_collapser
.cke_toolbox_collapser_min
352 .cke_rtl
.cke_toolbox_collapser
357 /* The CSS arrow, which belongs to the toolbar collapser. */
358 .cke_toolbox_collapser
.cke_arrow
360 display: inline-block
;
367 border-left: 3px solid transparent
;
368 border-right: 3px solid transparent
;
369 border-bottom: 3px solid
#474747;
370 border-top: 3px solid transparent
;
373 .cke_toolbox_collapser
.cke_toolbox_collapser_min
.cke_arrow
376 border-bottom-color: transparent
;
377 border-top-color: #474747;
380 .cke_hc
.cke_toolbox_collapser
.cke_arrow