3 * Styles for configuration of CKEditor module.
5 * Many of these styles are adapted directly from the default CKEditor theme
12 border: 1px solid #b6b6b6;
13 padding: 0.1667em 0.1667em 0.08em;
14 box-shadow: 0 1px 0 white inset;
16 background-image: -webkit-linear-gradient(top, whiteSmoke, #cfd1cf);
17 background-image: linear-gradient(top, whiteSmoke, #cfd1cf);
19 /* Disallow any user selections in the drag-and-drop toolbar config UI. */
20 -webkit-user-select: none;
21 -moz-user-select: none;
22 -ms-user-select: none;
25 .ckeditor-toolbar-active {
28 .ckeditor-toolbar-disabled {
32 .ckeditor-toolbar-disabled ul {
37 /* This is required to win over specificity of [dir="rtl"] ul */
38 [dir="rtl"] .ckeditor-toolbar ul,
39 [dir="rtl"] .ckeditor-toolbar-disabled ul {
47 .ckeditor-group-names-are-visible .ckeditor-row {
48 border: 1px solid whitesmoke;
50 .ckeditor-row + .ckeditor-row {
53 .ckeditor-toolbar-group,
54 .ckeditor-toolbar-group-placeholder,
55 .ckeditor-add-new-group {
56 float: left; /* LTR */
58 [dir="rtl"] .ckeditor-toolbar-group,
59 [dir="rtl"] .ckeditor-toolbar-group-placeholder,
60 [dir="rtl"] .ckeditor-add-new-group {
63 .ckeditor-toolbar-groups {
66 .ckeditor-toolbar-group {
70 .ckeditor-group-names-are-visible .ckeditor-toolbar-group,
71 .ckeditor-add-new-group {
72 border: 1px dotted #a6a6a6;
76 .ckeditor-toolbar-group.placeholder,
77 .ckeditor-toolbar-group.placeholder .ckeditor-toolbar-group-name {
80 .ckeditor-toolbar-group.placeholder .ckeditor-toolbar-group-name {
83 .ckeditor-toolbar-group-name {
89 .ckeditor-group-names-are-visible .ckeditor-toolbar-group-name {
93 .ckeditor-toolbar-active .placeholder,
94 .ckeditor-toolbar-active .ckeditor-add-new-group {
97 .ckeditor-group-names-are-visible .placeholder,
98 .ckeditor-group-names-are-visible .ckeditor-add-new-group {
101 .ckeditor-toolbar-group-buttons {
102 float: left; /* LTR */
104 [dir="rtl"] .ckeditor-toolbar-group-buttons {
107 .ckeditor-groupnames-toggle {
109 float: right; /* LTR */
111 [dir="rtl"] .ckeditor-groupnames-toggle {
114 .ckeditor-toolbar .ckeditor-toolbar-group > li {
115 border: 1px solid white;
117 background-image: -webkit-linear-gradient(transparent 60%, rgba(0, 0, 0, 0.1));
118 background-image: linear-gradient(transparent 60%, rgba(0, 0, 0, 0.1));
122 .ckeditor-toolbar-configuration .fieldset-description{
125 .ckeditor-toolbar-disabled .ckeditor-toolbar-available,
126 .ckeditor-toolbar-disabled .ckeditor-toolbar-dividers {
127 box-sizing: border-box;
129 .ckeditor-toolbar-disabled .ckeditor-toolbar-available {
130 float: left; /* LTR */
133 [dir="rtl"] .ckeditor-toolbar-disabled .ckeditor-toolbar-available {
136 .ckeditor-toolbar-disabled .ckeditor-toolbar-dividers {
137 float: right; /* LTR */
140 [dir="rtl"] .ckeditor-toolbar-disabled .ckeditor-toolbar-dividers {
143 .ckeditor-toolbar-disabled .ckeditor-buttons li a,
144 .ckeditor-toolbar .ckeditor-buttons,
145 .ckeditor-add-new-group button {
146 border: 1px solid #a6a6a6;
147 border-bottom-color: #979797;
149 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 1px 0 rgba(255, 255, 255, 0.15) inset;
151 .ckeditor-toolbar-disabled .ckeditor-buttons {
154 .ckeditor-toolbar-disabled .ckeditor-buttons li {
161 .ckeditor-buttons li {
164 float: left; /* LTR */
166 [dir="rtl"] .ckeditor-buttons li {
169 .ckeditor-buttons li a,
170 .ckeditor-add-new-group button {
172 background-image: -webkit-linear-gradient(top, white, #e4e4e4);
173 background-image: linear-gradient(top, white, #e4e4e4);
176 .ckeditor-buttons li a {
184 text-decoration: none;
185 text-shadow: 0 1px 0 rgba(255,255,255,.5);
188 .ckeditor-toolbar-dividers {
189 float: right; /* LTR */
191 [dir="rtl"] .ckeditor-toolbar-dividers {
194 .ckeditor-buttons li .cke-icon-only {
195 text-indent: -9999px;
197 /* Firefox includes the offscreen text in the focus indicator, resulting in a
198 far too wide focus indicator. This fixes that. */
201 .ckeditor-buttons .cke_button_icon img {
205 .ckeditor-buttons li .cke_ltr {
208 .ckeditor-buttons li .cke_rtl {
211 .ckeditor-buttons li a:focus,
212 .ckeditor-buttons li a:active,
213 .ckeditor-multiple-buttons li a:focus {
214 z-index: 11; /* Ensure focused buttons show their outline on all sides. */
216 .ckeditor-buttons li:first-child a {
217 border-top-left-radius: 2px; /* LTR */
218 border-bottom-left-radius: 2px; /* LTR */
220 [dir="rtl"] .ckeditor-buttons li:first-child a {
221 border-top-right-radius: 2px;
222 border-bottom-right-radius: 2px;
224 .ckeditor-buttons li:last-child a {
225 border-top-right-radius: 2px; /* LTR */
226 border-bottom-right-radius: 2px; /* LTR */
228 [dir="rtl"] .ckeditor-buttons li:last-child a {
229 border-top-left-radius: 2px;
230 border-bottom-left-radius: 2px;
232 .ckeditor-button-placeholder,
233 .ckeditor-toolbar-group-placeholder {
236 .ckeditor-toolbar-group-placeholder {
239 .ckeditor-multiple-buttons {
243 float: left; /* LTR */
245 [dir="rtl"] .ckeditor-multiple-buttons {
248 .ckeditor-multiple-buttons li {
249 float: left; /* LTR */
253 [dir="rtl"] .ckeditor-multiple-buttons li {
256 .ckeditor-multiple-buttons li a {
258 display: inline-block;
264 .ckeditor-buttons .ckeditor-group-button-separator,
265 .ckeditor-multiple-buttons .ckeditor-group-button-separator {
266 margin: -1px -3px -2px;
268 .ckeditor-buttons .ckeditor-group-button-separator a,
269 .ckeditor-multiple-buttons .ckeditor-group-button-separator a {
270 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAdCAMAAABG4xbVAAAAhFBMVEUAAACmpqampqampqb////l5eX////5+fmmpqatra2urq6vr6+1tbW2tra4uLi6urq8vLzb29ve3t7i4uLl5eXn5+fo6Ojp6enq6urr6+vs7Ozt7e3u7u7v7+/w8PDx8fHy8vLz8/P09PT19fX29vb39/f4+Pj5+fn6+vr7+/v8/Pz+/v7qIQO+AAAACHRSTlMATVmAi8XM29MuWToAAABjSURBVBiVrc5BCoAwDETRMKhtRBduev9LKm1xjItWRBBE6Nt9QkIwOTcUzk0Imi8aoMssxbgoTHMtqsFMLta0vPh2N49HyfdelPg6k9uvX/a+Bmggt1qJRNzQFVgjEnkUZDoBmH57VSypjg4AAAAASUVORK5CYII=) no-repeat center center;
277 ul.ckeditor-buttons li.ckeditor-button-separator a {
279 background-image: -webkit-linear-gradient(#e4e4e4, #b4b4b4);
280 background-image: linear-gradient(#e4e4e4, #b4b4b4);
288 .ckeditor-multiple-buttons .ckeditor-button-separator a {
294 .ckeditor-separator {
295 background-color: silver;
296 background-color: rgba(0, 0, 0, 0.2);
301 box-shadow: 1px 0 1px rgba(255, 255, 255, 0.5)
303 .ckeditor-button-arrow {
306 border-left: 3px solid transparent;
307 border-right: 3px solid transparent;
308 border-top: 3px solid #333;
309 display: inline-block;
312 .ckeditor-row-controls {
313 float: right; /* LTR */
316 text-align: right; /* LTR */
318 [dir="rtl"] .ckeditor-row-controls {
322 .ckeditor-row-controls a {
323 display: inline-block;
324 box-sizing: border-box;
331 text-decoration: none;