1 // Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
2 // For licensing, see LICENSE.html or http://cksource.com/ckeditor/license
6 @modifier-group-hover-color: #fffbe3;
7 @modifier-group-active-color: #f0fafb;
9 @modifier-active-toolbar-color: darken( @modifier-group-hover-color, 10% );
11 @modifier-toolbar-border-color: #ccc;
12 @modifier-toolbar-group-border-color: #ddd;
13 @modifier-toolbar-group-vpadding: 2px;
14 @modifier-toolbar-hgap: 5px;
16 @modifier-toolbar-button-color: #e7e7e7;
18 #toolbar .cke_toolbar {
24 // Dim all but active toolbars if some is active.
25 .some-toolbar-active .cke_toolbar {
32 // Active toolbar is always highlighted.
43 .border-radius( 5px );
44 .box-shadow( 0px 0px 15px 3px @modifier-active-toolbar-color );
49 border-color: darken( @modifier-active-toolbar-color, 40% );
68 margin-bottom: 2 * @sample-standard-vgap;
76 display: inline-block;
79 border: 1px solid #a6a6a6;
102 // Styles applied when configurator is hidden and code is being displayed (and vice-versa).
103 .configContainer.hidden,
104 .toolbarModifier.hidden,
105 .toolbarModifier-hints.hidden {
109 .toolbarModifier :focus,
110 .toolbar button:focus,
111 .configContainer textarea.configCode:focus {
115 div.toolbarModifier {
121 border-collapse: collapse;
131 &.empty-visible .empty {
136 // Give empty toolbar groups height similar to height of non empty groups.
137 // Non empty groups are stretched by contained toolbar buttons.
146 border-top: 1px solid @modifier-toolbar-border-color;
149 &[data-type="table-header"] {
150 display: table-header-group;
153 &[data-type="table-body"] {
154 display: table-row-group;
157 // Override global margins and paddings.
167 &[data-type="header"] {
173 &[data-type="group"],
174 &[data-type="separator"] {
175 border-bottom: 1px solid @modifier-toolbar-border-color;
178 &[data-type="subgroup"] {
179 border-top: 1px solid #eee;
186 &[data-type="group"].active,
187 &[data-type="group"]:hover,
188 &[data-type="separator"].active,
189 &[data-type="separator"]:hover {
194 &[data-type="group"].active,
195 &[data-type="separator"].active,
196 &[data-type="group"].active:hover,
197 &[data-type="separator"].active:hover {
198 background: @modifier-group-active-color;
201 &[data-type="group"]:hover,
202 &[data-type="separator"]:hover {
203 background: @modifier-group-hover-color;
206 &[data-type="separator"] {
215 padding: @modifier-toolbar-group-vpadding @modifier-toolbar-hgap;
221 vertical-align: middle;
224 // Note: this also controls the list of toolbar groups.
226 padding-left: @modifier-toolbar-hgap;
238 .border-radius( 5px );
239 border: 1px solid #bbb;
248 background-color: @sample-top-navigation-background;
249 border-color: transparent;
261 // List of toolbar groups.
263 border-collapse: collapse;
267 // A single toolbar group.
270 list-style-type: none;
271 // Resets slightly increased lists' lh which is bigger than button's height
272 // so it stretches columns.
275 &[data-type="subgroup"] {
276 border-top: 1px solid @modifier-toolbar-group-border-color;
282 [data-type="button"] {
283 .border-radius( 3px );
287 background: rgba(0, 0, 0, 0.04);
291 vertical-align: middle;
298 vertical-align: middle;
301 // List of buttons in a group.
305 // A single button in a group.
308 display: inline-block;
310 margin: @modifier-toolbar-group-vpadding 5px @modifier-toolbar-group-vpadding 0;
312 // Enforce styles to save space.
322 vertical-align: middle;
323 border: 1px solid #ddd;
333 & > .codemirror-wrapper {
337 // Advanced configurator: list of unused elements.
343 margin-left: @sample-standard-hgap;
347 padding: .3*@sample-standard-vgap @sample-standard-hgap;
348 background: @sample-box-background-color;
349 border-bottom: 1px solid @sample-box-border-color;
351 margin-bottom: @sample-standard-vgap;
356 margin-bottom: @sample-standard-vgap;
362 padding-bottom: .5*@sample-standard-vgap;
374 border-top: 1px solid @sample-box-border-color;
375 padding-left: @sample-standard-hgap;
377 .box-sizing( border-box );
382 vertical-align: middle;
389 padding-right: @sample-standard-hgap;
408 .toolbarModifier-hints,
409 .configContainer textarea.configCode,
411 .border-radius( 3px );
412 border: 1px solid #ccc;
416 .configContainer textarea.configCode,
418 .CodeMirror-linenumber {
420 font-family: @sample-font-stack-monospace;
429 .configContainer textarea.configCode {
430 .box-sizing( border-box );
431 color: @sample-text-color;
445 .CodeMirror-hints.toolbar-modifier {
447 color: @sample-text-color;
449 .CodeMirror-hint-active {
450 color: @sample-text-color;
451 background: @modifier-group-active-color;
455 font-family: @sample-font-stack-monospace;
458 background: @modifier-group-hover-color;
463 #toolbarModifierWrapper {
464 margin-bottom: @sample-standard-vgap;
466 .invalid .CodeMirror {
472 // Autogrow. http://codemirror.net/demo/resize.html
474 // Complementory with std's CodeMirror-lines vertical padding.
475 // Not needed when we use lines number, but we can't due to a bug in CM.
476 padding: 0 @sample-standard-vgap/2;
487 max-width: 1044px + 2 * @grid-gutter-width;
499 // Help button to display information about configurator.