Adding a ckeditor skin to better integrate with bootstrap.

parent bf9846e3
...@@ -7,6 +7,7 @@ CKEDITOR.editorConfig = function( config ) { ...@@ -7,6 +7,7 @@ CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. // Define changes to default configuration here.
// For the complete reference: // For the complete reference:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config // http://docs.ckeditor.com/#!/api/CKEDITOR.config
config.skin = 'bootstrapck';
// The toolbar groups arrangement, optimized for two toolbar rows. // The toolbar groups arrangement, optimized for two toolbar rows.
config.toolbarGroups = [ config.toolbarGroups = [
......
{
"0": [
[
"plugins/sourcearea/icons/source.png",
"plugins/sourcedialog/icons/sourcedialog.png"
],
[
"plugins/sourcearea/icons/source-rtl.png",
"plugins/sourcedialog/icons/sourcedialog-rtl.png"
],
"plugins/save/icons/save.png",
"plugins/newpage/icons/newpage.png",
"plugins/newpage/icons/newpage-rtl.png",
"plugins/preview/icons/preview.png",
"plugins/preview/icons/preview-rtl.png",
"plugins/print/icons/print.png",
[
"plugins/templates/icons/templates.png",
"plugins/templates/icons/templates-rtl.png"
],
"plugins/docprops/icons/docprops.png",
"plugins/docprops/icons/docprops-rtl.png"
],
"1": [
[
"plugins/clipboard/icons/cut-rtl.png",
"plugins/clipboard/icons/cut.png"
],
[
"plugins/clipboard/icons/copy.png",
"plugins/clipboard/icons/copy-rtl.png"
],
[
"plugins/clipboard/icons/paste.png",
"plugins/clipboard/icons/paste-rtl.png"
],
"plugins/pastetext/icons/pastetext.png",
"plugins/pastetext/icons/pastetext-rtl.png",
"plugins/pastefromword/icons/pastefromword.png",
"plugins/pastefromword/icons/pastefromword-rtl.png",
"plugins/undo/icons/undo.png",
"plugins/undo/icons/undo-rtl.png",
"plugins/undo/icons/redo.png",
"plugins/undo/icons/redo-rtl.png"
],
"2": [
[
"plugins/find/icons/find-rtl.png",
"plugins/find/icons/find.png"
],
"plugins/find/icons/replace.png",
"plugins/selectall/icons/selectall.png",
[
"plugins/wsc/icons/spellchecker.png",
"plugins/scayt/icons/scayt.png"
]
],
"3": [
"plugins/forms/icons/form.png",
"plugins/forms/icons/checkbox.png",
"plugins/forms/icons/radio.png",
[
"plugins/forms/icons/textfield-rtl.png",
"plugins/forms/icons/textfield.png"
],
"plugins/forms/icons/textarea.png",
"plugins/forms/icons/textarea-rtl.png",
"plugins/forms/icons/select.png",
"plugins/forms/icons/select-rtl.png",
"plugins/forms/icons/button.png",
"plugins/forms/icons/imagebutton.png",
"plugins/forms/icons/hiddenfield.png"
],
"4": [
"plugins/basicstyles/icons/bold.png",
"plugins/basicstyles/icons/italic.png",
"plugins/basicstyles/icons/underline.png",
"plugins/basicstyles/icons/strike.png",
"plugins/basicstyles/icons/superscript.png",
"plugins/basicstyles/icons/subscript.png",
"plugins/removeformat/icons/removeformat.png"
],
"5": [
"plugins/list/icons/numberedlist.png",
"plugins/list/icons/numberedlist-rtl.png",
"plugins/list/icons/bulletedlist.png",
"plugins/list/icons/bulletedlist-rtl.png",
"plugins/indent/icons/outdent.png",
"plugins/indent/icons/indent.png",
"plugins/indent/icons/indent-rtl.png",
"plugins/indent/icons/outdent-rtl.png",
"plugins/blockquote/icons/blockquote.png",
"plugins/div/icons/creatediv.png",
"plugins/justify/icons/justifyleft.png",
"plugins/justify/icons/justifycenter.png",
"plugins/justify/icons/justifyright.png",
"plugins/justify/icons/justifyblock.png",
"plugins/bidi/icons/bidiltr.png",
"plugins/bidi/icons/bidirtl.png"
],
"6": [
"plugins/link/icons/link.png",
"plugins/link/icons/unlink.png",
"plugins/link/icons/anchor.png",
"plugins/link/icons/anchor-rtl.png"
],
"7": [
"plugins/image/icons/image.png",
"plugins/flash/icons/flash.png",
"plugins/table/icons/table.png",
"plugins/horizontalrule/icons/horizontalrule.png",
"plugins/smiley/icons/smiley.png",
"plugins/specialchar/icons/specialchar.png",
"plugins/pagebreak/icons/pagebreak.png",
"plugins/pagebreak/icons/pagebreak-rtl.png",
"plugins/iframe/icons/iframe.png"
],
"8": [
"plugins/colorbutton/icons/textcolor.png",
"plugins/colorbutton/icons/bgcolor.png"
],
"9": [
"plugins/maximize/icons/maximize.png",
"plugins/showblocks/icons/showblocks.png",
"plugins/showblocks/icons/showblocks-rtl.png"
],
"10": [
"plugins/about/icons/about.png",
"plugins/uicolor/icons/uicolor.png",
"plugins/placeholder/icons/placeholder.png",
"plugins/language/icons/language.png"
],
"11": [
"plugins/link/images/anchor.png",
"skins/bootstrapck/images/close.png",
"skins/bootstrapck/images/lock.png",
"skins/bootstrapck/images/lock-open.png",
"skins/bootstrapck/images/refresh.png"
]
}
input.cke_dialog_ui_input_password,input.cke_dialog_ui_input_text,textarea.cke_dialog_ui_input_textarea{background-color:#fff;outline:0;width:100%;*width:95%;height:30px;padding:4px 10px;border:1px solid #ddd;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}input.cke_dialog_ui_input_password:focus,input.cke_dialog_ui_input_text:focus,textarea.cke_dialog_ui_input_textarea:focus{border-color:#66afe9;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}.cke_dialog{visibility:visible}.cke_dialog_body{z-index:1;background:#eee;border:1px solid #ddd;border-radius:4px}.cke_browser_gecko19 .cke_dialog_body{position:relative}.cke_dialog strong{font-weight:700}.cke_dialog_title{font-weight:700;font-size:13px;cursor:move;position:relative;color:#333;border-bottom:1px solid #ddd;padding:10px 12px;background:#eee}.cke_dialog_contents{background-color:#fff;overflow:auto;padding:15px 10px 5px;margin-top:35px;border-top:1px solid #ddd;border-radius:0 0 4px 4px}.cke_dialog_contents_body{overflow:auto;padding:17px 10px 5px;margin-top:22px}.cke_dialog_footer{text-align:right;position:relative;border-radius:0 0 4px 4px;border-top:1px solid #ddd;background:#eee}.cke_rtl .cke_dialog_footer{text-align:left}.cke_hc .cke_dialog_footer{outline:0;border-top:1px solid #fff}.cke_dialog .cke_resizer{margin-top:28px}.cke_dialog .cke_resizer_rtl{margin-left:5px}.cke_dialog .cke_resizer_ltr{margin-right:5px}.cke_dialog_tabs{height:24px;display:inline-block;margin:10px 0 0;position:absolute;z-index:2;left:10px}.cke_rtl .cke_dialog_tabs{right:10px}a.cke_dialog_tab{height:16px;padding:4px 8px;margin-right:3px;display:inline-block;cursor:pointer;line-height:16px;outline:0;color:#555;border:1px solid #ddd;border-radius:3px 3px 0 0;background:#f3f3f3}.cke_rtl a.cke_dialog_tab{margin-right:0;margin-left:3px}a.cke_dialog_tab:hover{background:#ddd;text-decoration:none}a.cke_dialog_tab_selected{background:#fff;color:#333;border-bottom-color:#fff;cursor:default;filter:none}a.cke_dialog_tab_selected:hover{background:#fff}.cke_hc a.cke_dialog_tab:hover,.cke_hc a.cke_dialog_tab_selected{border:3px solid;padding:2px 6px}a.cke_dialog_tab_disabled{color:#bababa;cursor:default}.cke_dialog_tabs .cke_dialog_ui_input_select{top:-7px!important}.cke_single_page .cke_dialog_tabs{display:none}.cke_single_page .cke_dialog_contents{padding-top:5px;margin-top:0;border-top:0}.cke_dialog_close_button{background-image:url(images/close.png);background-repeat:no-repeat;background-position:0 0;position:absolute;cursor:pointer;text-align:center;height:20px;width:20px;top:9px;z-index:5}.cke_hidpi .cke_dialog_close_button{background-image:url(images/hidpi/close.png);background-size:16px}.cke_dialog_close_button span{display:none}.cke_hc .cke_dialog_close_button span{display:inline;cursor:pointer;font-weight:700;position:relative;top:3px}.cke_ltr .cke_dialog_close_button{right:5px}.cke_rtl .cke_dialog_close_button{left:6px}div.cke_disabled .cke_dialog_ui_labeled_content div *{background-color:#ddd;cursor:default}.cke_dialog_ui_hbox table,.cke_dialog_ui_vbox table{margin:auto}.cke_dialog_ui_vbox{margin-top:5px}.cke_dialog_ui_vbox_child{padding:5px 0}.cke_dialog_ui_hbox{width:100%}.cke_dialog_ui_hbox_child,.cke_dialog_ui_hbox_first,.cke_dialog_ui_hbox_last{vertical-align:top}.cke_dialog_ui_hbox_first>.cke_dialog_ui_html,.cke_dialog_ui_hbox_first>.cke_dialog_ui_labeled_label,.cke_dialog_ui_hbox_last>.cke_dialog_ui_html,.cke_dialog_ui_hbox_last>.cke_dialog_ui_labeled_label{line-height:30px}.cke_ltr .cke_dialog_ui_hbox_child,.cke_ltr .cke_dialog_ui_hbox_first{padding-right:10px}.cke_rtl .cke_dialog_ui_hbox_child,.cke_rtl .cke_dialog_ui_hbox_first{padding-left:10px}.cke_ltr .cke_dialog_footer_buttons .cke_dialog_ui_hbox_child,.cke_ltr .cke_dialog_footer_buttons .cke_dialog_ui_hbox_first{padding-right:5px}.cke_rtl .cke_dialog_footer_buttons .cke_dialog_ui_hbox_child,.cke_rtl .cke_dialog_footer_buttons .cke_dialog_ui_hbox_first{padding-left:5px;padding-right:0}.cke_hc div.cke_dialog_ui_input_file,.cke_hc div.cke_dialog_ui_input_password,.cke_hc div.cke_dialog_ui_input_select,.cke_hc div.cke_dialog_ui_input_text,.cke_hc div.cke_dialog_ui_input_textarea{border:1px solid}.cke_dialog_ui_text{margin-bottom:7px}.cke_dialog_ui_select{height:auto!important;margin-bottom:7px}textarea.cke_dialog_ui_input_textarea{overflow:auto;resize:none}a.cke_dialog_ui_button{display:inline-block;*display:inline;*zoom:1;padding:3px 0;margin:0;text-align:center;color:#333;vertical-align:middle;cursor:pointer;border:1px solid #ddd;border-radius:4px;background:#fff}a.cke_dialog_ui_button:active,a.cke_dialog_ui_button:focus,a.cke_dialog_ui_button:hover{border-color:#aaa;background-color:#eee;text-decoration:none}.cke_dialog_page_contents a.cke_dialog_ui_button{height:22px;line-height:22px;background-color:#f4f4f4}.cke_dialog_page_contents a.cke_dialog_ui_button:active,.cke_dialog_page_contents a.cke_dialog_ui_button:focus,.cke_dialog_page_contents a.cke_dialog_ui_button:hover{background-color:#eee}span.cke_dialog_ui_button{padding:0 12px}.cke_hc a.cke_dialog_ui_button:active,.cke_hc a.cke_dialog_ui_button:focus,.cke_hc a.cke_dialog_ui_button:hover{border:3px solid;padding-top:1px;padding-bottom:1px}.cke_hc a.cke_dialog_ui_button:active span,.cke_hc a.cke_dialog_ui_button:focus span,.cke_hc a.cke_dialog_ui_button:hover span{padding-left:10px;padding-right:10px}.cke_dialog_footer_buttons a.cke_dialog_ui_button span{color:inherit;font-size:12px;line-height:20px}a.cke_dialog_ui_button_ok{color:#fff;border-color:#2274c9;background:#3f8edf}a.cke_dialog_ui_button_ok:active,a.cke_dialog_ui_button_ok:focus,a.cke_dialog_ui_button_ok:hover{border-color:#1e68b4;background:#2981db}a.cke_dialog_ui_button_cancel{background-color:#fff}a.cke_dialog_ui_button_cancel:focus{outline:0}span.cke_dialog_ui_button{cursor:pointer}.cke_dialog_footer_buttons{display:inline-table;margin:10px;width:auto;position:relative;vertical-align:middle}div.cke_dialog_ui_input_select{display:table}select.cke_dialog_ui_input_select{height:30px;line-height:30px;background-color:#fff;padding:4px 10px;border:1px solid #ddd;outline:0;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}.cke_dialog_ui_input_file{width:100%;height:30px}.cke_hc .cke_dialog_ui_labeled_content input:focus,.cke_hc .cke_dialog_ui_labeled_content select:focus,.cke_hc .cke_dialog_ui_labeled_content textarea:focus{outline:1px dotted}.cke_dialog .cke_dark_background,.cke_dialog .cke_light_background{background-color:#eee}.cke_dialog .cke_centered{text-align:center}.cke_dialog a.cke_btn_reset{float:right;background:url(images/refresh.png) top left no-repeat;width:16px;height:16px;border:1px none;font-size:1px}.cke_dialog a.cke_btn_locked,.cke_dialog a.cke_btn_unlocked{float:left;width:16px;height:16px;background-repeat:no-repeat;border:none 1px;font-size:1px}.cke_dialog a.cke_btn_locked{background-image:url(images/lock.png)}.cke_dialog a.cke_btn_locked .cke_icon{display:none}.cke_dialog a.cke_btn_unlocked{background-image:url(images/lock-open.png)}.cke_dialog .cke_btn_over{border:outset 1px;cursor:pointer}.cke_hidpi .cke_dialog a.cke_btn_reset{background-size:16px;background-image:url(images/hidpi/refresh.png)}.cke_hidpi .cke_dialog a.cke_btn_locked,.cke_hidpi .cke_dialog a.cke_btn_unlocked{background-size:16px}.cke_hidpi .cke_dialog a.cke_btn_locked{background-image:url(images/hidpi/lock.png)}.cke_hidpi .cke_dialog a.cke_btn_unlocked{background-image:url(images/hidpi/lock-open.png)}.cke_rtl .cke_dialog a.cke_btn_reset{float:left}.cke_rtl .cke_dialog a.cke_btn_locked,.cke_rtl .cke_dialog a.cke_btn_unlocked{float:right}.cke_dialog .FlashPreviewBox,.cke_dialog .ImagePreviewBox{border:1px solid #aaa;border-radius:4px;padding:6px 10px;margin-top:5px;background-color:#fff}.cke_dialog .ImagePreviewBox{overflow:scroll;height:205px;width:300px}.cke_dialog .ImagePreviewBox table td{white-space:normal}.cke_dialog .FlashPreviewBox{white-space:normal;overflow:auto;height:160px;width:390px}.cke_dialog .ImagePreviewLoader{position:absolute;white-space:normal;overflow:hidden;height:160px;width:230px;margin:2px;padding:2px;opacity:.9;filter:alpha(opacity=90);background-color:#e4e4e4}.cke_dialog .cke_pastetext{width:346px;height:170px}.cke_dialog .cke_pastetext textarea{width:340px;height:170px;resize:none}.cke_dialog iframe.cke_pasteframe{width:346px;height:130px;background-color:#fff;border:1px solid #aeb3b9;border-radius:4px}.cke_dialog .cke_hand{cursor:pointer}.cke_disabled{color:#a0a0a0}.cke_dialog_body .cke_label{display:none}.cke_dialog_body label{display:inline-block;margin-bottom:3px;cursor:default}.cke_dialog_body label.cke_required{font-weight:700}.cke_dialog_ui_html{line-height:150%}a.cke_smile{overflow:hidden;display:block;text-align:center;padding:.3em 0}a.cke_smile img{vertical-align:middle}a.cke_specialchar{cursor:inherit;display:block;height:1.25em;padding:.2em .3em;text-align:center}a.cke_smile,a.cke_specialchar{background-color:#eee;border:1px solid transparent;vertical-align:top}a.cke_smile:active,a.cke_smile:focus,a.cke_smile:hover,a.cke_specialchar:active,a.cke_specialchar:focus,a.cke_specialchar:hover{background:#fff;outline:0}a.cke_smile:hover,a.cke_specialchar:hover{border-color:#aaa}a.cke_smile:active,a.cke_smile:focus,a.cke_specialchar:active,a.cke_specialchar:focus{border-color:#428bca}.cke_dialog_contents a.colorChooser{display:block;margin-top:6px;margin-left:10px;width:80px}.cke_rtl .cke_dialog_contents a.colorChooser{margin-right:10px}.cke_dialog_ui_checkbox{display:inline-block;margin-bottom:5px}.cke_btn_over,.cke_dialog_ui_checkbox_input:focus,.cke_dialog_ui_radio_input:focus{outline:1px dotted #696969}.cke_iframe_shim{display:block;position:absolute;top:0;left:0;z-index:-1;filter:alpha(opacity=0);width:100%;height:100%}
\ No newline at end of file
input.cke_dialog_ui_input_password,input.cke_dialog_ui_input_text,textarea.cke_dialog_ui_input_textarea{background-color:#fff;outline:0;width:100%;*width:95%;height:30px;padding:4px 10px;border:1px solid #ddd;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}input.cke_dialog_ui_input_password:focus,input.cke_dialog_ui_input_text:focus,textarea.cke_dialog_ui_input_textarea:focus{border-color:#66afe9;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}.cke_dialog{visibility:visible}.cke_dialog_body{z-index:1;background:#eee;border:1px solid #ddd;border-radius:4px}.cke_browser_gecko19 .cke_dialog_body{position:relative}.cke_dialog strong{font-weight:700}.cke_dialog_title{font-weight:700;font-size:13px;cursor:move;position:relative;color:#333;border-bottom:1px solid #ddd;padding:10px 12px;background:#eee}.cke_dialog_contents{background-color:#fff;overflow:auto;padding:15px 10px 5px;margin-top:35px;border-top:1px solid #ddd;border-radius:0 0 4px 4px}.cke_dialog_contents_body{overflow:auto;padding:17px 10px 5px;margin-top:22px}.cke_dialog_footer{text-align:right;position:relative;border-radius:0 0 4px 4px;border-top:1px solid #ddd}.cke_rtl .cke_dialog_footer{text-align:left}.cke_hc .cke_dialog_footer{outline:0;border-top:1px solid #fff}.cke_dialog .cke_resizer{margin-top:28px}.cke_dialog .cke_resizer_rtl{margin-left:5px}.cke_dialog .cke_resizer_ltr{margin-right:5px}.cke_dialog_tabs{height:24px;display:inline-block;margin:10px 0 0;position:absolute;z-index:2;left:10px}.cke_rtl .cke_dialog_tabs{right:10px}a.cke_dialog_tab{height:16px;padding:4px 8px;margin-right:3px;display:inline-block;cursor:pointer;line-height:16px;outline:0;color:#555;border:1px solid #ddd;border-radius:3px 3px 0 0;background:#f3f3f3}.cke_rtl a.cke_dialog_tab{margin-right:0;margin-left:3px}a.cke_dialog_tab:hover{background:#ddd;text-decoration:none}a.cke_dialog_tab_selected{background:#fff;color:#333;border-bottom-color:#fff;cursor:default;filter:none}a.cke_dialog_tab_selected:hover{background:#fff}.cke_hc a.cke_dialog_tab:hover,.cke_hc a.cke_dialog_tab_selected{border:3px solid;padding:2px 6px}a.cke_dialog_tab_disabled{color:#bababa;cursor:default}.cke_dialog_tabs .cke_dialog_ui_input_select{top:-7px!important}.cke_single_page .cke_dialog_tabs{display:none}.cke_single_page .cke_dialog_contents{padding-top:5px;margin-top:0;border-top:0}.cke_dialog_close_button{background-image:url(images/close.png);background-repeat:no-repeat;background-position:0 0;position:absolute;cursor:pointer;text-align:center;height:20px;width:20px;top:9px;z-index:5}.cke_hidpi .cke_dialog_close_button{background-image:url(images/hidpi/close.png);background-size:16px}.cke_dialog_close_button span{display:none}.cke_hc .cke_dialog_close_button span{display:inline;cursor:pointer;font-weight:700;position:relative;top:3px}.cke_ltr .cke_dialog_close_button{right:5px}.cke_rtl .cke_dialog_close_button{left:6px}div.cke_disabled .cke_dialog_ui_labeled_content div *{background-color:#ddd;cursor:default}.cke_dialog_ui_hbox table,.cke_dialog_ui_vbox table{margin:auto}.cke_dialog_ui_vbox{margin-top:5px}.cke_dialog_ui_vbox_child{padding:5px 0}.cke_dialog_ui_hbox{width:100%}.cke_dialog_ui_hbox_child,.cke_dialog_ui_hbox_first,.cke_dialog_ui_hbox_last{vertical-align:top}.cke_dialog_ui_hbox_first>.cke_dialog_ui_html,.cke_dialog_ui_hbox_first>.cke_dialog_ui_labeled_label,.cke_dialog_ui_hbox_last>.cke_dialog_ui_html,.cke_dialog_ui_hbox_last>.cke_dialog_ui_labeled_label{line-height:30px}.cke_ltr .cke_dialog_ui_hbox_child,.cke_ltr .cke_dialog_ui_hbox_first{padding-right:10px}.cke_rtl .cke_dialog_ui_hbox_child,.cke_rtl .cke_dialog_ui_hbox_first{padding-left:10px}.cke_ltr .cke_dialog_footer_buttons .cke_dialog_ui_hbox_child,.cke_ltr .cke_dialog_footer_buttons .cke_dialog_ui_hbox_first{padding-right:5px}.cke_rtl .cke_dialog_footer_buttons .cke_dialog_ui_hbox_child,.cke_rtl .cke_dialog_footer_buttons .cke_dialog_ui_hbox_first{padding-left:5px;padding-right:0}.cke_hc div.cke_dialog_ui_input_file,.cke_hc div.cke_dialog_ui_input_password,.cke_hc div.cke_dialog_ui_input_select,.cke_hc div.cke_dialog_ui_input_text,.cke_hc div.cke_dialog_ui_input_textarea{border:1px solid}.cke_dialog_ui_text{margin-bottom:7px}.cke_dialog_ui_select{height:auto!important;margin-bottom:7px}textarea.cke_dialog_ui_input_textarea{overflow:auto;resize:none}a.cke_dialog_ui_button{display:inline-block;*display:inline;*zoom:1;padding:3px 0;margin:0;text-align:center;color:#333;vertical-align:middle;cursor:pointer;border:1px solid #ddd;border-radius:4px;background:#fff}a.cke_dialog_ui_button:active,a.cke_dialog_ui_button:focus,a.cke_dialog_ui_button:hover{border-color:#aaa;background-color:#eee;text-decoration:none}.cke_dialog_page_contents a.cke_dialog_ui_button{height:22px;line-height:22px;background-color:#f4f4f4}.cke_dialog_page_contents a.cke_dialog_ui_button:active,.cke_dialog_page_contents a.cke_dialog_ui_button:focus,.cke_dialog_page_contents a.cke_dialog_ui_button:hover{background-color:#eee}span.cke_dialog_ui_button{padding:0 12px}.cke_hc a.cke_dialog_ui_button:active,.cke_hc a.cke_dialog_ui_button:focus,.cke_hc a.cke_dialog_ui_button:hover{border:3px solid;padding-top:1px;padding-bottom:1px}.cke_hc a.cke_dialog_ui_button:active span,.cke_hc a.cke_dialog_ui_button:focus span,.cke_hc a.cke_dialog_ui_button:hover span{padding-left:10px;padding-right:10px}.cke_dialog_footer_buttons a.cke_dialog_ui_button span{color:inherit;font-size:12px;line-height:20px}a.cke_dialog_ui_button_ok{color:#fff;border-color:#2274c9;background:#3f8edf}a.cke_dialog_ui_button_ok:active,a.cke_dialog_ui_button_ok:focus,a.cke_dialog_ui_button_ok:hover{border-color:#1e68b4;background:#2981db}a.cke_dialog_ui_button_cancel{background-color:#fff}a.cke_dialog_ui_button_cancel:focus{outline:0}span.cke_dialog_ui_button{cursor:pointer}.cke_dialog_footer_buttons{display:inline-table;margin:10px;width:auto;position:relative;vertical-align:middle}div.cke_dialog_ui_input_select{display:table}select.cke_dialog_ui_input_select{height:30px;line-height:30px;background-color:#fff;padding:4px 10px;border:1px solid #ddd;outline:0;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}.cke_dialog_ui_input_file{width:100%;height:30px}.cke_hc .cke_dialog_ui_labeled_content input:focus,.cke_hc .cke_dialog_ui_labeled_content select:focus,.cke_hc .cke_dialog_ui_labeled_content textarea:focus{outline:1px dotted}.cke_dialog .cke_dark_background,.cke_dialog .cke_light_background{background-color:#eee}.cke_dialog .cke_centered{text-align:center}.cke_dialog a.cke_btn_reset{float:right;background:url(images/refresh.png) top left no-repeat;width:16px;height:16px;border:1px none;font-size:1px}.cke_dialog a.cke_btn_locked,.cke_dialog a.cke_btn_unlocked{float:left;width:16px;height:16px;background-repeat:no-repeat;border:none 1px;font-size:1px}.cke_dialog a.cke_btn_locked{background-image:url(images/lock.png)}.cke_dialog a.cke_btn_locked .cke_icon{display:none}.cke_dialog a.cke_btn_unlocked{background-image:url(images/lock-open.png)}.cke_dialog .cke_btn_over{border:outset 1px;cursor:pointer}.cke_hidpi .cke_dialog a.cke_btn_reset{background-size:16px;background-image:url(images/hidpi/refresh.png)}.cke_hidpi .cke_dialog a.cke_btn_locked,.cke_hidpi .cke_dialog a.cke_btn_unlocked{background-size:16px}.cke_hidpi .cke_dialog a.cke_btn_locked{background-image:url(images/hidpi/lock.png)}.cke_hidpi .cke_dialog a.cke_btn_unlocked{background-image:url(images/hidpi/lock-open.png)}.cke_rtl .cke_dialog a.cke_btn_reset{float:left}.cke_rtl .cke_dialog a.cke_btn_locked,.cke_rtl .cke_dialog a.cke_btn_unlocked{float:right}.cke_dialog .FlashPreviewBox,.cke_dialog .ImagePreviewBox{border:1px solid #aaa;border-radius:4px;padding:6px 10px;margin-top:5px;background-color:#fff}.cke_dialog .ImagePreviewBox{overflow:scroll;height:205px;width:300px}.cke_dialog .ImagePreviewBox table td{white-space:normal}.cke_dialog .FlashPreviewBox{white-space:normal;overflow:auto;height:160px;width:390px}.cke_dialog .ImagePreviewLoader{position:absolute;white-space:normal;overflow:hidden;height:160px;width:230px;margin:2px;padding:2px;opacity:.9;filter:alpha(opacity=90);background-color:#e4e4e4}.cke_dialog .cke_pastetext{width:346px;height:170px}.cke_dialog .cke_pastetext textarea{width:340px;height:170px;resize:none}.cke_dialog iframe.cke_pasteframe{width:346px;height:130px;background-color:#fff;border:1px solid #aeb3b9;border-radius:4px}.cke_dialog .cke_hand{cursor:pointer}.cke_disabled{color:#a0a0a0}.cke_dialog_body .cke_label{display:none}.cke_dialog_body label{display:inline-block;margin-bottom:3px;cursor:default}.cke_dialog_body label.cke_required{font-weight:700}.cke_dialog_ui_html{line-height:150%}a.cke_smile{overflow:hidden;display:block;text-align:center;padding:.3em 0}a.cke_smile img{vertical-align:middle}a.cke_specialchar{cursor:inherit;display:block;height:1.25em;padding:.2em .3em;text-align:center}a.cke_smile,a.cke_specialchar{background-color:#eee;border:1px solid transparent;vertical-align:top}a.cke_smile:active,a.cke_smile:focus,a.cke_smile:hover,a.cke_specialchar:active,a.cke_specialchar:focus,a.cke_specialchar:hover{background:#fff;outline:0}a.cke_smile:hover,a.cke_specialchar:hover{border-color:#aaa}a.cke_smile:active,a.cke_smile:focus,a.cke_specialchar:active,a.cke_specialchar:focus{border-color:#428bca}.cke_dialog_contents a.colorChooser{display:block;margin-top:6px;margin-left:10px;width:80px}.cke_rtl .cke_dialog_contents a.colorChooser{margin-right:10px}.cke_dialog_ui_checkbox{display:inline-block;margin-bottom:5px}.cke_btn_over,.cke_dialog_ui_checkbox_input:focus,.cke_dialog_ui_radio_input:focus{outline:1px dotted #696969}.cke_iframe_shim{display:block;position:absolute;top:0;left:0;z-index:-1;filter:alpha(opacity=0);width:100%;height:100%}.cke_dialog_footer{filter:""}
\ No newline at end of file
input.cke_dialog_ui_input_password,input.cke_dialog_ui_input_text,textarea.cke_dialog_ui_input_textarea{background-color:#fff;outline:0;width:100%;*width:95%;height:30px;padding:4px 10px;border:1px solid #ddd;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}input.cke_dialog_ui_input_password:focus,input.cke_dialog_ui_input_text:focus,textarea.cke_dialog_ui_input_textarea:focus{border-color:#66afe9;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}.cke_dialog{visibility:visible}.cke_dialog_body{z-index:1;background:#eee;border:1px solid #ddd;border-radius:4px}.cke_browser_gecko19 .cke_dialog_body{position:relative}.cke_dialog strong{font-weight:700}.cke_dialog_title{font-weight:700;font-size:13px;cursor:move;position:relative;color:#333;border-bottom:1px solid #ddd;padding:10px 12px;background:#eee}.cke_dialog_contents{background-color:#fff;overflow:auto;padding:15px 10px 5px;margin-top:35px;border-top:1px solid #ddd;border-radius:0 0 4px 4px}.cke_dialog_contents_body{overflow:auto;padding:17px 10px 5px;margin-top:22px}.cke_dialog_footer{text-align:right;position:relative;border-radius:0 0 4px 4px;border-top:1px solid #ddd;background:#eee}.cke_rtl .cke_dialog_footer{text-align:left}.cke_hc .cke_dialog_footer{outline:0;border-top:1px solid #fff}.cke_dialog .cke_resizer{margin-top:28px}.cke_dialog .cke_resizer_rtl{margin-left:5px}.cke_dialog .cke_resizer_ltr{margin-right:5px}.cke_dialog_tabs{height:24px;display:inline-block;margin:10px 0 0;position:absolute;z-index:2;left:10px}.cke_rtl .cke_dialog_tabs{right:10px}a.cke_dialog_tab{height:16px;padding:4px 8px;margin-right:3px;display:inline-block;cursor:pointer;line-height:16px;outline:0;color:#555;border:1px solid #ddd;border-radius:3px 3px 0 0;background:#f3f3f3}.cke_rtl a.cke_dialog_tab{margin-right:0;margin-left:3px}a.cke_dialog_tab:hover{background:#ddd;text-decoration:none}a.cke_dialog_tab_selected{background:#fff;color:#333;border-bottom-color:#fff;cursor:default;filter:none}a.cke_dialog_tab_selected:hover{background:#fff}.cke_hc a.cke_dialog_tab:hover,.cke_hc a.cke_dialog_tab_selected{border:3px solid;padding:2px 6px}a.cke_dialog_tab_disabled{color:#bababa;cursor:default}.cke_dialog_tabs .cke_dialog_ui_input_select{top:-7px!important}.cke_single_page .cke_dialog_tabs{display:none}.cke_single_page .cke_dialog_contents{padding-top:5px;margin-top:0;border-top:0}.cke_dialog_close_button{background-image:url(images/close.png);background-repeat:no-repeat;background-position:0 0;position:absolute;cursor:pointer;text-align:center;height:20px;width:20px;top:9px;z-index:5}.cke_hidpi .cke_dialog_close_button{background-image:url(images/hidpi/close.png);background-size:16px}.cke_dialog_close_button span{display:none}.cke_hc .cke_dialog_close_button span{display:inline;cursor:pointer;font-weight:700;position:relative;top:3px}.cke_ltr .cke_dialog_close_button{right:5px}.cke_rtl .cke_dialog_close_button{left:6px}div.cke_disabled .cke_dialog_ui_labeled_content div *{background-color:#ddd;cursor:default}.cke_dialog_ui_hbox table,.cke_dialog_ui_vbox table{margin:auto}.cke_dialog_ui_vbox{margin-top:5px}.cke_dialog_ui_vbox_child{padding:5px 0}.cke_dialog_ui_hbox{width:100%}.cke_dialog_ui_hbox_child,.cke_dialog_ui_hbox_first,.cke_dialog_ui_hbox_last{vertical-align:top}.cke_dialog_ui_hbox_first>.cke_dialog_ui_html,.cke_dialog_ui_hbox_first>.cke_dialog_ui_labeled_label,.cke_dialog_ui_hbox_last>.cke_dialog_ui_html,.cke_dialog_ui_hbox_last>.cke_dialog_ui_labeled_label{line-height:30px}.cke_ltr .cke_dialog_ui_hbox_child,.cke_ltr .cke_dialog_ui_hbox_first{padding-right:10px}.cke_rtl .cke_dialog_ui_hbox_child,.cke_rtl .cke_dialog_ui_hbox_first{padding-left:10px}.cke_ltr .cke_dialog_footer_buttons .cke_dialog_ui_hbox_child,.cke_ltr .cke_dialog_footer_buttons .cke_dialog_ui_hbox_first{padding-right:5px}.cke_rtl .cke_dialog_footer_buttons .cke_dialog_ui_hbox_child,.cke_rtl .cke_dialog_footer_buttons .cke_dialog_ui_hbox_first{padding-left:5px;padding-right:0}.cke_hc div.cke_dialog_ui_input_file,.cke_hc div.cke_dialog_ui_input_password,.cke_hc div.cke_dialog_ui_input_select,.cke_hc div.cke_dialog_ui_input_text,.cke_hc div.cke_dialog_ui_input_textarea{border:1px solid}.cke_dialog_ui_text{margin-bottom:7px}.cke_dialog_ui_select{height:auto!important;margin-bottom:7px}textarea.cke_dialog_ui_input_textarea{overflow:auto;resize:none}a.cke_dialog_ui_button{display:inline-block;*display:inline;*zoom:1;padding:3px 0;margin:0;text-align:center;color:#333;vertical-align:middle;cursor:pointer;border:1px solid #ddd;border-radius:4px;background:#fff}a.cke_dialog_ui_button:active,a.cke_dialog_ui_button:focus,a.cke_dialog_ui_button:hover{border-color:#aaa;background-color:#eee;text-decoration:none}.cke_dialog_page_contents a.cke_dialog_ui_button{height:22px;line-height:22px;background-color:#f4f4f4}.cke_dialog_page_contents a.cke_dialog_ui_button:active,.cke_dialog_page_contents a.cke_dialog_ui_button:focus,.cke_dialog_page_contents a.cke_dialog_ui_button:hover{background-color:#eee}span.cke_dialog_ui_button{padding:0 12px}.cke_hc a.cke_dialog_ui_button:active,.cke_hc a.cke_dialog_ui_button:focus,.cke_hc a.cke_dialog_ui_button:hover{border:3px solid;padding-top:1px;padding-bottom:1px}.cke_hc a.cke_dialog_ui_button:active span,.cke_hc a.cke_dialog_ui_button:focus span,.cke_hc a.cke_dialog_ui_button:hover span{padding-left:10px;padding-right:10px}.cke_dialog_footer_buttons a.cke_dialog_ui_button span{color:inherit;font-size:12px;line-height:20px}a.cke_dialog_ui_button_ok{color:#fff;border-color:#2274c9;background:#3f8edf}a.cke_dialog_ui_button_ok:active,a.cke_dialog_ui_button_ok:focus,a.cke_dialog_ui_button_ok:hover{border-color:#1e68b4;background:#2981db}a.cke_dialog_ui_button_cancel{background-color:#fff}a.cke_dialog_ui_button_cancel:focus{outline:0}span.cke_dialog_ui_button{cursor:pointer}.cke_dialog_footer_buttons{display:inline-table;margin:10px;width:auto;position:relative;vertical-align:middle}div.cke_dialog_ui_input_select{display:table}select.cke_dialog_ui_input_select{height:30px;line-height:30px;background-color:#fff;padding:4px 10px;border:1px solid #ddd;outline:0;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}.cke_dialog_ui_input_file{width:100%;height:30px}.cke_hc .cke_dialog_ui_labeled_content input:focus,.cke_hc .cke_dialog_ui_labeled_content select:focus,.cke_hc .cke_dialog_ui_labeled_content textarea:focus{outline:1px dotted}.cke_dialog .cke_dark_background,.cke_dialog .cke_light_background{background-color:#eee}.cke_dialog .cke_centered{text-align:center}.cke_dialog a.cke_btn_reset{float:right;background:url(images/refresh.png) top left no-repeat;width:16px;height:16px;border:1px none;font-size:1px}.cke_dialog a.cke_btn_locked,.cke_dialog a.cke_btn_unlocked{float:left;width:16px;height:16px;background-repeat:no-repeat;border:none 1px;font-size:1px}.cke_dialog a.cke_btn_locked{background-image:url(images/lock.png)}.cke_dialog a.cke_btn_locked .cke_icon{display:none}.cke_dialog a.cke_btn_unlocked{background-image:url(images/lock-open.png)}.cke_dialog .cke_btn_over{border:outset 1px;cursor:pointer}.cke_hidpi .cke_dialog a.cke_btn_reset{background-size:16px;background-image:url(images/hidpi/refresh.png)}.cke_hidpi .cke_dialog a.cke_btn_locked,.cke_hidpi .cke_dialog a.cke_btn_unlocked{background-size:16px}.cke_hidpi .cke_dialog a.cke_btn_locked{background-image:url(images/hidpi/lock.png)}.cke_hidpi .cke_dialog a.cke_btn_unlocked{background-image:url(images/hidpi/lock-open.png)}.cke_rtl .cke_dialog a.cke_btn_reset{float:left}.cke_rtl .cke_dialog a.cke_btn_locked,.cke_rtl .cke_dialog a.cke_btn_unlocked{float:right}.cke_dialog .FlashPreviewBox,.cke_dialog .ImagePreviewBox{border:1px solid #aaa;border-radius:4px;padding:6px 10px;margin-top:5px;background-color:#fff}.cke_dialog .ImagePreviewBox{overflow:scroll;height:205px;width:300px}.cke_dialog .ImagePreviewBox table td{white-space:normal}.cke_dialog .FlashPreviewBox{white-space:normal;overflow:auto;height:160px;width:390px}.cke_dialog .ImagePreviewLoader{position:absolute;white-space:normal;overflow:hidden;height:160px;width:230px;margin:2px;padding:2px;opacity:.9;filter:alpha(opacity=90);background-color:#e4e4e4}.cke_dialog .cke_pastetext{width:346px;height:170px}.cke_dialog .cke_pastetext textarea{width:340px;height:170px;resize:none}.cke_dialog iframe.cke_pasteframe{width:346px;height:130px;background-color:#fff;border:1px solid #aeb3b9;border-radius:4px}.cke_dialog .cke_hand{cursor:pointer}.cke_disabled{color:#a0a0a0}.cke_dialog_body .cke_label{display:none}.cke_dialog_body label{display:inline-block;margin-bottom:3px;cursor:default}.cke_dialog_body label.cke_required{font-weight:700}.cke_dialog_ui_html{line-height:150%}a.cke_smile{overflow:hidden;display:block;text-align:center;padding:.3em 0}a.cke_smile img{vertical-align:middle}a.cke_specialchar{cursor:inherit;display:block;height:1.25em;padding:.2em .3em;text-align:center}a.cke_smile,a.cke_specialchar{background-color:#eee;border:1px solid transparent;vertical-align:top}a.cke_smile:active,a.cke_smile:focus,a.cke_smile:hover,a.cke_specialchar:active,a.cke_specialchar:focus,a.cke_specialchar:hover{background:#fff;outline:0}a.cke_smile:hover,a.cke_specialchar:hover{border-color:#aaa}a.cke_smile:active,a.cke_smile:focus,a.cke_specialchar:active,a.cke_specialchar:focus{border-color:#428bca}.cke_dialog_contents a.colorChooser{display:block;margin-top:6px;margin-left:10px;width:80px}.cke_rtl .cke_dialog_contents a.colorChooser{margin-right:10px}.cke_dialog_ui_checkbox{display:inline-block;margin-bottom:5px}.cke_btn_over,.cke_dialog_ui_checkbox_input:focus,.cke_dialog_ui_radio_input:focus{outline:1px dotted #696969}.cke_iframe_shim{display:block;position:absolute;top:0;left:0;z-index:-1;filter:alpha(opacity=0);width:100%;height:100%}.cke_dialog_footer{display:block;height:38px}.cke_ltr .cke_dialog_footer>*{float:right}.cke_rtl .cke_dialog_footer>*{float:left}
\ No newline at end of file
BootstrapCK Skin
====================
The BootstrapCK-Skin is a skin for [CKEditor4](http://ckeditor.com/) based on [Twitter Bootstrap3](http://getbootstrap.com/) styles.
[Sass](http://sass-lang.com/) is used to rewrite the editor's styles and [Grunt](http://gruntjs.com/) to be able to watch, convert and minify the sass into css files. These files aren't really needed for the simple use of the skin, but handy if you want to make some adjustments to it.
For more information about skins, please check the [CKEditor Skin SDK](http://docs.cksource.com/CKEditor_4.x/Skin_SDK)
documentation.
## Installation
**Just skin please**
Add the whole bootstrapck folder to the skin folder.<br />
In ckeditor.js and config.js change the skin name to "bootstrapck".<br />
Done!
**The whole skin - sass - grunt package**
All the sass files are included in the bootstrapck folder, so first follow the 'just skin please'-steps<br />
Now add the Gruntfile.js and the package.json to de ckeditor folder.
npm install
grunt build
You can start tampering now.
## Demo
http://kunstmaan.github.io/BootstrapCK4-Skin/
### Previous version
If you would like to get the Bootstrap2 skin for CKeditor3, [here](https://github.com/Kunstmaan/BootstrapCK-Skin)'s the previous version.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Kunstmaan/BootstrapCK4-Skin @ GitHub</title>
<link rel="stylesheet" href="css/bootstrapck-sample.css">
</head>
<body>
<a href="https://github.com/Kunstmaan/BootstrapCK4-Skin"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
<div class="container">
<div class="download">
<a href="https://github.com/Kunstmaan/BootstrapCK4-Skin/zipball/master" onClick="javascript: _gaq.push(['_trackEvent', 'Download', 'BootstrapCKSkin-master.zip']);">
<img border="0" width="90" src="https://github.com/images/modules/download/zip.png">
</a>
<a href="https://github.com/Kunstmaan/BootstrapCK4-Skin/tarball/master" onClick="javascript: _gaq.push(['_trackEvent', 'Download', 'BootstrapCKSkin-master.tar.gz']);">
<img border="0" width="90" src="https://github.com/images/modules/download/tar.png">
</a>
</div>
<h1>
<a href="https://github.com/Kunstmaan/BootstrapCK4-Skin" onClick="javascript: _gaq.push(['_trackEvent', 'Outbound Links', 'github.com/Kunstmaan/BootstrapCK4-Skin']);">BootstrapCK4-Skin</a>
<span>by <a href="https://github.com/Kunstmaan"onClick="javascript: _gaq.push(['_trackEvent', 'Outbound Links', 'github.com/Kunstmaan']);">Kunstmaan</a></span>
</h1>
<!-- Demo -->
<h2>Demo</h2>
<form action="sample_posteddata.php" method="post">
<p>
<textarea class="ckeditor" id="editor1" name="editor1" cols="100" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
</p>
</form>
<p class="twitter">Like what you see? Let the world know!
<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://kunstmaan.github.com/BootstrapCK4-Skin/" data-via="" data-count="horizontal" data-text="A CKEditor skin based on @twbootstrap by Kunstmaan">Tweet</a>
</p>
<!-- About -->
<h2>About</h2>
<p>The BootstrapCK4-Skin is a skin for <a href="http://ckeditor.com/" target="_blank" onClick="javascript: _gaq.push(['_trackEvent', 'Outbound Links', 'ckeditor.com']);">CKEditor4</a> based on <a href="http://getbootstrap.com/" target="_blank" onClick="javascript: _gaq.push(['_trackEvent', 'Outbound Links', 'twitter.github.com/bootstrap/']);">Twitter Bootstrap3</a> styles.</p>
<p><a href="http://sass-lang.com/" target="_blank">Sass</a> is used to rewrite the editor's styles and <a href="http://gruntjs.com/" target="_blank">Grunt</a> to be able to watch, convert and minify the sass into css files. These files aren't really needed for the simple use of the skin, but handy if you want to make some adjustments to it.</p>
<p>For more information about skins, please check the <a href="http://docs.cksource.com/CKEditor_4.x/Skin_SDK" target="_blank">CKEditor Skin SDK</a></p>
<!-- Installation -->
<h2>Installation</h2>
<h3>Just skin please</h3>
<p>Add the whole bootstrapck folder to the skin folder.<br />
In ckeditor.js and config.js change the skin name to "bootstrapck".<br />
Done!</p>
<h3>The whole skin - sass - grunt package</h3>
<p>All the sass files are included in the bootstrapck folder, so first follow the 'just skin please'-steps<br />
Now add the Gruntfile.js and the package.json to de ckeditor folder.</p>
<pre>npm install <br />grunt build</pre>
<p>You can start tampering now.</p>
<p>Or if you'd like to adjust the icons, use the bootstrapck-dev folder instead.</p>
<!-- Authors / Contact -->
<h2>Authors</h2>
<p>Indri Kenens (indri.kenens@kunstmaan.be)</p>
<h2>Contact</h2>
<p>Kunstmaan (support@kunstmaan.be)</p>
<!-- Download -->
<h2>Download</h2>
<p>
You can download this project in either
<a href="https://github.com/Kunstmaan/BootstrapCK4-Skin/zipball/master" onClick="javascript: _gaq.push(['_trackEvent', 'Download', 'BootstrapCKSkin-master.zip']);">zip</a> or
<a href="https://github.com/Kunstmaan/BootstrapCK4-Skin/tarball/master" onClick="javascript: _gaq.push(['_trackEvent', 'Download', 'BootstrapCKSkin-master.tar.gz']);">tar formats.</a>
</p>
<p>You can also clone the project with <a href="http://git-scm.com" onClick="javascript: _gaq.push(['_trackEvent', 'Outbound Links', 'git-scm.com']);">Git</a>
by running: <pre>$ git clone git://github.com/Kunstmaan/BootstrapCK4-Skin</pre></p>
<!-- Previous version -->
<h2>Previous version</h2>
<p>If you would like to get the Bootstrap2 skin for CKeditor3, <a href="https://github.com/Kunstmaan/BootstrapCK-Skin" target="_blank">here</a>'s the previous version.</p>
<!-- Footer -->
<div class="footer">
get the source code on GitHub : <a href="https://github.com/Kunstmaan/BootstrapCK4-Skin" onClick="javascript: _gaq.push(['_trackEvent', 'Outbound Links', 'github.com/Kunstmaan/BootstrapCK4-Skin']);">Kunstmaan/BootstrapCK4-Skin</a>
</div>
</div>
<!-- ckeditor -->
<script src="../../../ckeditor.js"></script>
<!-- jQuery -->
<script src="js/jquery-1.11.0.min.js"></script>
<!-- Google Analytics -->
<script src="js/analytics.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-27907146-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- Twitter -->
<script type="text/javascript">
(function(){
var twitterWidgets = document.createElement('script');
twitterWidgets.type = 'text/javascript';
twitterWidgets.async = true;
twitterWidgets.src = 'http://platform.twitter.com/widgets.js';
twitterWidgets.onload = _ga.trackTwitter;
document.getElementsByTagName('head')[0].appendChild(twitterWidgets);
})();
</script>
</body>
</html>
body{margin-top:1.0em;background-color:#fff;font-family:Helvetica,Arial,sans-serif;color:#404040}.container{margin:0 auto;width:900px;padding:0 0 20px}h1{font-size:40px;margin:40px 0 28px;padding:110px 0 9px;border-bottom:1px solid #ccc}h1 a,h1 a:visited,h1 a:focus,h1 a:hover{color:#404040;text-decoration:none}h1 span{font-size:18px;font-weight:normal;color:#bfbfbf}h1 span a,h1 span a:visited,h1 span a:focus,h1 span a:hover{color:#bfbfbf}h1 a{text-decoration:none}h2{font-size:23px;margin:10px 0 8px}h3{font-size:16px;margin:10px 0 8px}p{margin:0 0 30px;font-size:13px;line-height:18px}a,a:visited,a:focus{color:#0069d6;text-decoration:none}a:hover{color:#00438a;text-decoration:underline}.download{float:right}pre{background:#f5f5f5;color:#404040;padding:16px;border:1px solid rgba(0,0,0,0.05);border-radius:4px;box-shadow:0 1px 1px rgba(0,0,0,0.05) inset;margin:-20px 0 10px;line-height:200%}.twitter{margin:-20px 0 40px;color:#666}.twitter iframe{vertical-align:bottom;margin:0 0 0 5px}.footer{text-align:center;padding-top:20px;margin-top:60px;font-size:14px;color:#808080;border-top:1px solid #ccc}.footer a,.footer a:visited,.footer a:focus{color:#333}.footer a:hover{color:#000}
\ No newline at end of file
var _ga=_ga||{},_gaq=_gaq||[];_ga.trackSocial=function(a,c){_ga.trackFacebook(a,c);_ga.trackTwitter(a,c)};
_ga.trackFacebook=function(a,c){var d=_ga.buildTrackerName_(c);try{FB&&(FB.Event&&FB.Event.subscribe)&&(FB.Event.subscribe("edge.create",function(b){_gaq.push([d+"_trackSocial","facebook","like",b,a])}),FB.Event.subscribe("edge.remove",function(b){_gaq.push([d+"_trackSocial","facebook","unlike",b,a])}),FB.Event.subscribe("message.send",function(b){_gaq.push([d+"_trackSocial","facebook","send",b,a])}))}catch(e){}};_ga.buildTrackerName_=function(a){return a?a+".":""};
_ga.trackTwitter=function(a,c){var d=_ga.buildTrackerName_(c);try{twttr&&(twttr.events&&twttr.events.bind)&&twttr.events.bind("tweet",function(b){if(b){var c;b.target&&"IFRAME"==b.target.nodeName&&(c=_ga.extractParamFromUri_(b.target.src,"url"));_gaq.push([d+"_trackSocial","twitter","tweet",c,a])}})}catch(e){}};_ga.extractParamFromUri_=function(a,c){if(a){var a=a.split("#")[0],d=a.split("?");if(1!=d.length)for(var d=decodeURI(d[1]),c=c+"=",d=d.split("&"),e=0,b;b=d[e];++e)if(0===b.indexOf(c))return unescape(b.split("=")[1])}};
jQuery&&jQuery("a").click(function(){var a=jQuery(this).attr("href");null!=a&&(a.match(/^http/i)&&!a.match(document.domain)?_gaq.push(["_trackEvent","outgoing","click",a]):a.match(/\.(doc|pdf|xls|ppt|zip|txt|vsd|vxd|js|css|rar|exe|wma|mov|avi|wmv|mp3)$/i)?_gaq.push(["_trackEvent","download","click",a]):a.match(/^mailto:/i)&&_gaq.push(["_trackEvent","mailto","click",a]))});
\ No newline at end of file
/*
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/*
editor_gecko.css
==================
This file contains styles to used by all Gecko based browsers (Firefox) only.
*/
/* Base it on editor.css, overriding it with styles defined in this file. */
@import "../../components/editor";
.cke_bottom
{
padding-bottom: 3px;
}
.cke_combo_text
{
margin-bottom: -1px;
margin-top: 1px;
}
/*
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/*
dialog_ie.css
===============
This file contains styles to used by all versions of Internet Explorer only.
*/
/* Base it on dialog.css, overriding it with styles defined in this file. */
@import "../../dialog/dialog";
/* IE doesn't leave enough padding in text input for cursor to blink in RTL. (#6087) */
.cke_rtl input.cke_dialog_ui_input_text,
.cke_rtl input.cke_dialog_ui_input_password
{
padding-right: 2px;
}
/* Compensate the padding added above on container. */
.cke_rtl div.cke_dialog_ui_input_text,
.cke_rtl div.cke_dialog_ui_input_password
{
padding-left: 2px;
}
.cke_rtl div.cke_dialog_ui_input_text {
padding-right: 1px;
}
.cke_rtl .cke_dialog_ui_vbox_child,
.cke_rtl .cke_dialog_ui_hbox_child,
.cke_rtl .cke_dialog_ui_hbox_first,
.cke_rtl .cke_dialog_ui_hbox_last
{
padding-right: 2px !important;
}
/* Disable filters for HC mode. */
.cke_hc .cke_dialog_title,
.cke_hc .cke_dialog_footer,
.cke_hc a.cke_dialog_tab,
.cke_hc a.cke_dialog_ui_button,
.cke_hc a.cke_dialog_ui_button:hover,
.cke_hc a.cke_dialog_ui_button_ok,
.cke_hc a.cke_dialog_ui_button_ok:hover
{
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
/* Remove border from dialog field wrappers in HC
to avoid double borders. */
.cke_hc div.cke_dialog_ui_input_text,
.cke_hc div.cke_dialog_ui_input_password,
.cke_hc div.cke_dialog_ui_input_textarea,
.cke_hc div.cke_dialog_ui_input_select,
.cke_hc div.cke_dialog_ui_input_file
{
border: 0;
}
/*
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/*
editor_ie.css
===============
This file contains styles to used by all versions of Internet Explorer only.
*/
/* Base it on editor.css, overriding it with styles defined in this file. */
@import "../../components/editor";
a.cke_button_disabled,
/* Those two are to overwrite the gradient filter since we cannot have both of them. */
a.cke_button_disabled:hover,
a.cke_button_disabled:focus,
a.cke_button_disabled:active
{
filter: alpha(opacity = 30);
}
/* PNG Alpha Transparency Fix For IE<9 */
.cke_button_disabled .cke_button_icon
{
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffffff, endColorstr=#00ffffff);
}
.cke_button_off:hover,
.cke_button_off:focus,
.cke_button_off:active
{
filter: alpha(opacity = 100);
}
.cke_combo_disabled .cke_combo_inlinelabel,
.cke_combo_disabled .cke_combo_open
{
filter: alpha(opacity = 30);
}
.cke_toolbox_collapser
{
border: 1px solid #a6a6a6;
}
.cke_toolbox_collapser .cke_arrow
{
margin-top: 1px;
}
/* Gradient filters must be removed for HC mode to reveal the background. */
.cke_hc .cke_top,
.cke_hc .cke_bottom,
.cke_hc .cke_combo_button,
.cke_hc a.cke_combo_button:hover,
.cke_hc a.cke_combo_button:focus,
.cke_hc .cke_toolgroup,
.cke_hc .cke_button_on,
.cke_hc a.cke_button_off:hover,
.cke_hc a.cke_button_off:focus,
.cke_hc a.cke_button_off:active,
.cke_hc .cke_toolbox_collapser,
.cke_hc .cke_toolbox_collapser:hover,
.cke_hc .cke_panel_grouptitle
{
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
/*
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/*
dialog_ie7.css
===============
This file contains styles to used by Internet Explorer 7 only.
*/
/* Base it on dialog_ie.css, overriding it with styles defined in this file. */
@import "../../dialog/dialog";
.cke_dialog_title
{
/* gradient fix */
zoom: 1;
}
.cke_dialog_footer
{
/* IE7 ignores footer's outline. Use border instead. */
border-top: 1px solid #bfbfbf;
}
/* IE7 needs position static #6806 */
.cke_dialog_footer_buttons
{
position: static;
}
/* IE7 crops the bottom pixels of footer buttons (#9491) */
.cke_dialog_footer_buttons a.cke_dialog_ui_button
{
vertical-align: top;
}
/* IE7 margin loose on float. */
.cke_dialog .cke_resizer_ltr
{
padding-left: 4px;
}
.cke_dialog .cke_resizer_rtl
{
padding-right: 4px;
}
/* IE7 doesn't support box-sizing and therefore we cannot
have sexy inputs which go well with the layout. */
.cke_dialog_ui_input_text,
.cke_dialog_ui_input_password,
.cke_dialog_ui_input_textarea,
.cke_dialog_ui_input_select
{
padding: 0 !important;
}
/* Predefined border to avoid visual size change impact. */
.cke_dialog_ui_checkbox_input,
.cke_dialog_ui_ratio_input,
.cke_btn_reset,
.cke_btn_locked,
.cke_btn_unlocked
{
border: 1px solid transparent !important;
}
/*
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/*
editor_ie7.css
===============
This file contains styles to used by Internet Explorer 7 only.
*/
/* Base it on editor_ie.css, overriding it with styles defined in this file. */
@import "../../components/editor";
.cke_rtl .cke_toolgroup,
.cke_rtl .cke_toolbar_separator,
.cke_rtl .cke_button,
.cke_rtl .cke_button *,
.cke_rtl .cke_combo,
.cke_rtl .cke_combo *,
.cke_rtl .cke_path_item,
.cke_rtl .cke_path_item *,
.cke_rtl .cke_path_empty
{
float: none;
}
.cke_rtl .cke_toolgroup,
.cke_rtl .cke_toolbar_separator,
.cke_rtl .cke_combo_button,
.cke_rtl .cke_combo_button *,
.cke_rtl .cke_button,
.cke_rtl .cke_button_icon,
{
display: inline-block;
vertical-align: top;
}
.cke_toolbox
{
display:inline-block;
padding-bottom: 5px;
height: 100%;
}
.cke_rtl .cke_toolbox
{
padding-bottom: 0;
}
.cke_toolbar
{
margin-bottom: 5px;
}
.cke_rtl .cke_toolbar
{
margin-bottom: 0;
}
/* IE7: toolgroup must be adapted to toolbar items height. */
.cke_toolgroup
{
height: 26px;
}
/* Avoid breaking elements that use background gradient when page zoom > 1 (#9548) */
.cke_toolgroup,
.cke_combo
{
position: relative;
}
a.cke_button
{
/* IE7: buttons must not float to wrap the toolbar in a whole. */
float:none;
/* IE7: buttons have to be aligned to top. Otherwise, some buttons like
* source and scayt are displayed a few pixels below the base line.
*/
vertical-align:top;
}
.cke_toolbar_separator
{
display: inline-block;
float: none;
vertical-align: top;
background-color: #c0c0c0;
}
.cke_toolbox_collapser .cke_arrow
{
margin-top: 0;
}
.cke_toolbox_collapser .cke_arrow
{
border-width:4px;
}
.cke_toolbox_collapser.cke_toolbox_collapser_min .cke_arrow
{
border-width:3px;
}
.cke_rtl .cke_button_arrow
{
padding-top: 8px;
margin-right: 2px;
}
.cke_rtl .cke_combo_inlinelabel
{
display: table-cell;
vertical-align: middle;
}
/*
* Editor menus are display:table-driven. IE7 doesn't support this approach,
* hence this position&float hybrid fall-back.
*/
.cke_menubutton
{
display: block;
height: 24px;
}
.cke_menubutton_inner
{
display: block;
position: relative;
}
.cke_menubutton_icon
{
height: 16px;
width: 16px;
}
.cke_menubutton_icon,
.cke_menubutton_label,
.cke_menuarrow
{
display: inline-block;
}
.cke_menubutton_label
{
width: auto;
vertical-align: top;
line-height: 24px;
height: 24px;
margin: 0 10px 0 0;
}
.cke_menuarrow
{
width: 5px;
height: 6px;
padding: 0;
position: absolute;
right: 8px;
top: 10px;
background-position: 0 0;
}
/* Menus in RTL mode. */
.cke_rtl .cke_menubutton_icon
{
position: absolute;
right: 0px;
top: 0px;
}
.cke_rtl .cke_menubutton_label
{
float: right;
clear: both;
margin: 0 24px 0 10px;
}
.cke_hc .cke_rtl .cke_menubutton_label
{
margin-right: 0;
}
.cke_rtl .cke_menuarrow
{
left: 8px;
right: auto;
background-position: 0 -24px;
}
.cke_hc .cke_menuarrow
{
top: 5px;
padding: 0 5px;
}
.cke_rtl input.cke_dialog_ui_input_text,
.cke_rtl input.cke_dialog_ui_input_password
{
/* Positioning is required for IE7 on text inputs not to stretch dialog horizontally. (#8971)*/
position: relative;
}
/* Reset vertical paddings which put editing area under bottom UI space. (#9721) */
.cke_wysiwyg_div
{
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/*
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/*
dialog_ie8.css
===============
This file contains styles to used by Internet Explorer 8 only.
*/
/* Base it on dialog_ie.css, overriding it with styles defined in this file. */
@import "../../dialog/dialog";
/* Without the following, IE8 cannot compensate footer button thick borders
on :focus/:active. */
a.cke_dialog_ui_button_ok:focus span,
a.cke_dialog_ui_button_ok:active span,
a.cke_dialog_ui_button_cancel:focus span,
a.cke_dialog_ui_button_cancel:active span
{
display: block;
}
/*
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/*
editor_ie8.css
===============
This file contains styles to used by Internet Explorer 8 only.
*/
/* Base it on editor_ie.css, overriding it with styles defined in this file. */
@import "../../components/editor";
.cke_toolbox_collapser .cke_arrow
{
border-width:4px;
}
.cke_toolbox_collapser.cke_toolbox_collapser_min .cke_arrow
{
border-width:3px;
}
.cke_toolbox_collapser .cke_arrow
{
margin-top: 0;
}
/*
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/*
dialog_ie7.css
===============
This file contains styles to used by Internet Explorer in
Quirks mode only.
*/
/* Base it on dialog_ie.css, overriding it with styles defined in this file. */
@import "../../dialog/dialog";
/* [IE7-8] Filter on footer causes background artifacts when opening dialog. */
.cke_dialog_footer
{
filter: "";
}
/*
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/*
editor_iequirks.css
===============
This file contains styles to used by all versions of Internet Explorer
in Quirks mode only.
*/
/* Base it on editor_ie.css, overriding it with styles defined in this file. */
@import "../../components/editor";
.cke_top,
.cke_contents,
.cke_bottom
{
width: 100%; /* hasLayout = true */
}
.cke_button_arrow
{
font-size: 0; /* Set minimal font size, so arrow won't be streched by the text that doesn't exist. */
}
/* Bring back toolbar buttons in RTL. */
.cke_rtl .cke_toolgroup,
.cke_rtl .cke_toolbar_separator,
.cke_rtl .cke_button,
.cke_rtl .cke_button *,
.cke_rtl .cke_combo,
.cke_rtl .cke_combo *,
.cke_rtl .cke_path_item,
.cke_rtl .cke_path_item *,
.cke_rtl .cke_path_empty
{
float: none;
}
.cke_rtl .cke_toolgroup,
.cke_rtl .cke_toolbar_separator,
.cke_rtl .cke_combo_button,
.cke_rtl .cke_combo_button *,
.cke_rtl .cke_button,
.cke_rtl .cke_button_icon,
{
display: inline-block;
vertical-align: top;
}
/* Otherwise formatting toolbar breaks when editing a mixed content (#9893). */
.cke_rtl .cke_button_icon
{
float: none;
}
.cke_resizer
{
width: 10px;
}
.cke_source
{
white-space: normal;
}
.cke_bottom
{
position: static; /* Without this bottom space doesn't move when resizing editor. */
}
.cke_colorbox
{
font-size: 0; /* Set minimal font size, so button won't be streched by the text that doesn't exist. */
}
/*
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/*
dialog_opera.css
===============
This file contains styles to used by all versions of Opera only.
*/
/* Base it on dialog.css, overriding it with styles defined in this file. */
@import "../../dialog/dialog";
/* Opera has problem with box-shadow and td with border-collapse: collapse */
/* inset shadow is mis-aligned */
.cke_dialog_footer
{
display: block;
height: 38px;
}
.cke_ltr .cke_dialog_footer > *
{
float:right;
}
.cke_rtl .cke_dialog_footer > *
{
float:left;
}
/*
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/*
colorpanel.css (part of editor.css)
=====================================
The color panel is related to the contents part of the panels that are
displayed when clicking the color buttons of the toolbar. See panels.css for
styles related to the outer part of panels.
The following is the visual representation of the color panel contents:
+-- .cke_panel_block.cke_colorblock --+
| +-- a.cke_colorauto --------------+ |
| | | |
| | AUTOMATIC COLOR | |
| | | |
| +---------------------------------+ |
| +-- table ------------------------+ |
| | | |
| | COLOR PALETTE | |
| | | |
| |---------------------------------| |
| | "More Colors" | |
| +---------------------------------+ |
+-------------------------------------+
The AUTOMATIC COLOR section is an <a> containing a table with two cells with
the following contents:
+-- TD -----------------+ +-- TD -----------------+
| +-- .cke_colorbox --+ | | |
| | | | | "Automatic" |
| +-------------------+ | | |
+-----------------------+ +-----------------------+
The COLOR PALETTE section instead is a table with a variable number of cells
(by default 8). Each cell represents a color box, with the following structure:
+-- A.cke_colorbox ---------+
| +-- SPAN.cke_colorbox --+ |
| | | |
| +-----------------------+ |
+---------------------------+
*/
/* The container of the color palette. */
.cke_colorblock {
padding: 3px;
font-size: 11px;
font-family: 'Microsoft Sans Serif', Tahoma, Arial, Verdana, Sans-Serif;
}
.cke_colorblock,
.cke_colorblock a {
text-decoration: none;
color: #000;
}
/* The box which is to represent a single color on the color palette.
It is a small, square-shaped element which can be selected from the palette. */
span.cke_colorbox {
width: 10px;
height: 10px;
border: 1px solid $gray;
float: left;
}
.cke_rtl span.cke_colorbox {
float: right;
}
/* The wrapper of the span.cke_colorbox. It provides an extra border and padding. */
a.cke_colorbox {
border: 1px solid #fff;
padding: 2px;
float: left;
width: 12px;
height: 12px;
border-radius: 2px;
}
.cke_rtl a.cke_colorbox {
float: right;
}
/* Different states of the a.cke_colorbox wrapper. */
a {
&:hover, &:focus, &:active {
&.cke_colorbox {
border: 1px solid $hr-border;
background-color: $gray-lighter;
}
}
}
/* Buttons which are visible at the top/bottom of the color palette:
- cke_colorauto (TOP) applies the automatic color.
- cke_colormore (BOTTOM) executes the color dialog.
*/
a.cke_colorauto, a.cke_colormore {
border: 1px solid #fff;
padding: 2px;
display: block;
cursor: pointer;
}
/* Different states of cke_colorauto/cke_colormore buttons. */
a {
&:hover, &:focus, &:active {
&.cke_colorauto, &.cke_colormore {
border: 1px solid $hr-border;
background-color: $gray-lighter;
}
}
}
/*
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/*
elementspath.css (part of editor.css)
=======================================
This file styles the "Elements Path", whith is the list of element names
present at the the bottom bar of the CKEditor interface.
The following is a visual representation of its main elements:
+-- .cke_path ---------------------------------------------------------------+
| +-- .cke_path_item ----+ +-- .cke_path_item ----+ +-- .cke_path_empty ---+ |
| | | | | | | |
| +----------------------+ +----------------------+ +----------------------+ |
+----------------------------------------------------------------------------+
*/
/* The box that holds the entire elements path. */
.cke_path {
float: left;
margin: -2px 0 2px;
}
/* Each item of the elements path. */
.cke_path_item,
/* Empty element available at the end of the elements path, to help us keeping
the proper box size when the elements path is empty. */
.cke_path_empty {
display: inline-block;
float: left;
padding: 3px 4px;
margin-right: 2px;
cursor: default;
text-decoration: none;
outline: 0;
border: 0;
color: #4c4c4c;
font-weight: bold;
font-size: 11px;
}
.cke_rtl {
.cke_path, .cke_path_item, .cke_path_empty {
float: right;
}
}
/* The items are <a> elements, so we define its hover states here. */
a.cke_path_item {
&:hover, &:focus, &:active {
background-color: #bfbfbf;
color: #333;
border-radius: 2px;
}
}
.cke_hc a.cke_path_item {
&:hover, &:focus, &:active {
border: 2px solid;
padding: 1px 2px;
}
}
/*
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/*
mainui.css (part of editor.css)
=================================
This file styles the basic structure of the CKEditor user interface - the box
that holds everything.
CKEditor offers two main editing modes. The main UI blocks that compose these
modes are:
For "Theme UI" mode, the one most generally used:
+-- .cke_chrome ----------------------+
|+-- .cke_inner ---------------------+|
|| +-- .cke_top -------------------+ ||
|| | | ||
|| +-------------------------------+ ||
|| +-- .cke_contents --------------+ ||
|| | | ||
|| +-------------------------------+ ||
|| +-- .cke_bottom ----------------+ ||
|| | | ||
|| +-------------------------------+ ||
|+-----------------------------------+|
+-------------------------------------+
For "Inline Editing" mode:
+-- .cke_chrome .cke_float------------+
|+-- .cke_inner ---------------------+|
|| +-- .cke_top -------------------+ ||
|| | | ||
|| +-------------------------------+ ||
|+-----------------------------------+|
+-------------------------------------+
Special outer level classes used in this file:
.cke_hc: Available when the editor is rendered on "High Contrast".
*/
/* The outer boundary of the interface. */
.cke_chrome {
/* This is <span>, so transform it into a block.*/
display: block;
border: 1px solid $hr-border;
border-radius: $border-radius;
padding: 0 3px;
background: $gray-lighter;
}
/* The inner boundary of the interface. */
.cke_inner {
/* This is <span>, so transform it into a block.*/
display: block;
-webkit-touch-callout: none;
background: transparent;
padding: 0;
}
/* Added to the outer boundary of the UI when in inline editing,
when the UI is floating. */
.cke_float {
/* Make white the space between the outer and the inner borders. */
border: none;
.cke_inner {
/* As we don't have blocks following top (toolbar) we suppress the padding
as the toolbar defines its own margin. */
padding-bottom: 0;
}
.cke_top {
border: 1px solid $hr-border;
}
}
/* Make the main spaces enlarge to hold potentially floated content. */
.cke_top, .cke_contents, .cke_bottom {
/* These are <span>s, so transform them into blocks.*/
display: block;
/* Ideally this should be "auto", but it shows scrollbars in IE7. */
overflow: hidden;
}
.cke_top, .cke_bottom {
padding: 3px 0 0;
background: $gray-lighter;
}
.cke_top {
/* Allow breaking toolbars when in a narrow editor. (#9947) */
white-space: normal;
}
.cke_contents {
background-color: #fff;
border: 1px solid $hr-border;
border-radius: $border-radius;
}
.cke_bottom {
position: relative;
}
/* On iOS we need to manually enable scrolling in the contents block. (#9945) */
.cke_browser_ios .cke_contents {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* The resizer is the small UI element that is rendered at the bottom right
part of the editor. It makes is possible to resize the editor UI. */
.cke_resizer {
/* To avoid using images for the resizer, we create a small triangle,
using some CSS magic. */
width: 0;
height: 0;
overflow: hidden;
width: 0;
height: 0;
overflow: hidden;
border-width: 10px 10px 0 0;
border-color: transparent $gray-dark transparent transparent;
border-style: dashed solid dashed dashed;
font-size: 0;
vertical-align: bottom;
margin-top: 6px;
/* A margin in case of no other element in the same container
to keep a distance to the bottom edge. */
margin-bottom: 2px;
}
.cke_hc .cke_resizer {
font-size: 15px;
width: auto;
height: auto;
border-width: 0;
}
.cke_resizer_ltr {
cursor: se-resize;
float: right;
margin-right: -4px;
}
/* This class is added in RTL mode. This is a special case for the resizer
(usually the .cke_rtl class is used), because it may not necessarily be in
RTL mode if the main UI is RTL. It depends instead on the context where the
editor is inserted on. */
.cke_resizer_rtl {
border-width: 10px 0 0 10px;
border-color: transparent transparent transparent $gray;
border-style: dashed dashed dashed solid;
cursor: sw-resize;
float: left;
margin-left: -4px;
right: auto;
}
/* The editing area (where users type) can be rendered as an editable <div>
element (e.g. divarea plugin). In that case, this is the class applied to
that element. */
.cke_wysiwyg_div {
display: block;
height: 100%;
overflow: auto;
padding: 0 8px;
outline-style: none;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/*
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/*
menu.css (part of editor.css)
===============================
This file styles menus used in the editor UI. These menus are the list of
options available inside some "floating panels", like menu buttons of the
toolbar or the context menu.
Note that the menu itself doesn't include the floating element that holds it.
That element is styles in the panel.css file.
The following is a visual representation of the main elements of a menu:
+-- .cke_menu -----------------+
| +-- .cke_menuitem --------+ |
| | +-- .cke_menubutton ---+ | |
| | | | | |
| | +----------------------+ | |
| +--------------------------+ |
| +-- .cke_menuseparator ----+ |
| ... |
+------------------------------+
This is the .cke_menubutton structure:
(Note that the menu button icon shares with toolbar button the common class .cke_button_icon to achieve the same outlook.)
+-- .cke_menubutton -------------------------------------------------------------------------+
| +-- .cke_menubutton_inner ---------------------------------------------------------------+ |
| | +-- .cke_menubutton_icon ---+ +-- .cke_menubutton_label --+ +-- .cke_cke_menuarrow --+ | |
| | | +-- .cke_button_icon ---+ | | | | | | |
| | | | | | | | | | | |
| | | +-----------------------+ | | | | | | |
| | +---------------------------+ +---------------------------+ +------------------------+ | |
| +----------------------------------------------------------------------------------------+ |
+--------------------------------------------------------------------------------------------+
Special outer level classes used in this file:
.cke_hc: Available when the editor is rendered on "High Contrast".
.cke_rtl: Available when the editor UI is on RTL.
*/
/* .cke_menuitem is the element that holds the entire structure of each of the
menu items. */
.cke_menubutton {
/* The "button" inside a menu item is a <a> element.
Transforms it into a block. */
display: block;
}
.cke_button_icon {
opacity: .8;
}
.cke_menuitem span {
/* Avoid the text selection cursor inside menu items. */
cursor: default;
}
.cke_menubutton {
&:hover, &:focus, &:active {
background-color: #D3D3D3;
display: block;
}
}
.cke_hc .cke_menubutton {
padding: 2px;
&:hover, &:focus, &:active {
border: 2px solid;
padding: 0;
}
}
.cke_menubutton_inner {
display: table-row;
}
.cke_menubutton_icon,
.cke_menubutton_label,
.cke_menuarrow {
display: table-cell;
}
/* The menu item icon. */
.cke_menubutton_icon {
background-color: #D7D8D7;
opacity: 0.70; /* Safari, Opera and Mozilla */
filter: alpha(opacity=70); /* IE */
padding: 4px;
}
.cke_hc .cke_menubutton_icon {
height: 16px;
width: 0;
padding: 4px 0;
}
.cke_menubutton {
&:hover, &:focus, &:active {
.cke_menubutton_icon {
background-color: #D0D2D0;
}
}
}
.cke_menubutton_disabled {
&:hover, &:focus, &:active {
.cke_menubutton_icon {
/* The icon will get opacity as well when hovered. */
opacity: 0.3;
filter: alpha(opacity=30);
}
}
}
/* The textual part of each menu item. */
.cke_menubutton_label {
padding: 0 5px;
background-color: transparent;
width: 100%;
vertical-align: middle;
}
.cke_menubutton_disabled .cke_menubutton_label {
/* Greyed label text indicates a disabled menu item. */
opacity: 0.3;
filter: alpha(opacity=30);
}
.cke_menubutton_on {
border: 1px solid #dedede;
background-color: #f2f2f2;
.cke_menubutton_icon {
padding-right: 3px;
}
}
.cke_menubutton {
&:hover, &:focus, &:active {
background-color: #EFF0EF;
}
}
.cke_panel_frame .cke_menubutton_label {
display: none;
}
/* The separator used to separate menu item groups. */
.cke_menuseparator {
background-color: #D3D3D3;
height: 1px;
filter: alpha(opacity=70); /* IE */
opacity: 0.70; /* Safari, Opera and Mozilla */
}
/* The small arrow shown for item with sub-menus. */
.cke_menuarrow {
background-image: url(images/arrow.png);
background-position: 0 10px;
background-repeat: no-repeat;
padding: 0 5px;
span {
display: none;
}
}
.cke_rtl .cke_menuarrow {
background-position: 5px -13px;
background-repeat: no-repeat;
}
.cke_hc .cke_menuarrow span {
vertical-align: middle;
display: inline;
}
/*
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/*
panel.css (part of editor.css)
================================
Panels are floating elements that can hold different types of contents.
The following are common uses of it:
- The element that toolbar combos display when opening them.
- The context menu.
- The list of items displayed by "menu buttons" (e.g. scayt).
- The panel shown when opening "panel buttons" (e.g. color buttons).
Panel contents are wrapped into an iframe, so it is possible to have additional
CSS loaded inside them (e.g. to have more accurate preview on the styles combo).
The following is a visual representation of the outer elements of a panel:
+-- .cke_panel(*) ---------------------+
| +-- IFRAME.cke_panel_frame --------+ |
| | +-- HTML.cke_panel_container --+ | |
| | | +-- .cke_panel_block ------+ | | |
| | | | | | | |
| | | | (contents here) | | | |
| | | | | | | |
| | | +--------------------------+ | | |
| | +------------------------------+ | |
| +----------------------------------+ |
+--------------------------------------+
(*) All kinds of panel share the above structure. Menu panels adds the
.cke_menu_panel class to the outer element, while toolbar combos add the
.cke_combopanel class.
This file also defines styles for panel lists (used by combos). For menu-like
panel contents and color panels check menu.css and colorpanel.css.
*/
/* The box that holds an IFRAME. It's inserted into a host document and positioned
absolutely by the application. It floats above the host document/editor. */
.cke_panel {
/* Restore the loading hide */
visibility: visible;
width: 120px;
height: 100px;
overflow: hidden;
margin-top: 5px;
background-color: #fff;
border: 1px solid $gray;
border-radius: $border-radius;
}
/* This class represents panels which are used as context menus. */
.cke_menu_panel {
padding: 0;
margin: 0;
}
/* This class represents panels which are used by rich combos. */
.cke_combopanel {
width: 150px;
height: 178px;
}
/* The IFRAME the panel is wrapped into. */
.cke_panel_frame {
width: 100%;
height: 100%;
font-size: 12px;
overflow: auto;
overflow-x: hidden;
}
/* The HTML document which is a direct descendant of the IFRAME */
.cke_panel_container {
overflow-y: auto;
overflow-x: hidden;
}
/*
Here we start the definition of panel lists (e.g. combo panels). The following
is its visual representation:
+-- .cke_panel_block -----------------+
| +-- .cke_panel_grouptitle --------+ |
| | | |
| +---------------------------------+ |
| +-- .cke_panel_list --------------+ |
| | +-- .cke_panel_listItem ------+ | |
| | | +-- a --------------------+ | | |
| | | | +-- span -------------+ | | | |
| | | | | | | | | |
| | | | +---------------------+ | | | |
| | | +-------------------------+ | | |
| | +-----------------------------+ | |
| | +-- .cke_panel_listItem ------+ | |
| | | +-- a --------------------+ | | |
| | | | +-- span -------------+ | | | |
| | | | | | | | | |
| | | | +---------------------+ | | | |
| | | +-------------------------+ | | |
| | +-----------------------------+ | |
| | ... | |
| +---------------------------------+ |
+-------------------------------------+
*/
/* The list of panel items. */
.cke_panel_list {
list-style-type: none;
margin: 3px;
padding: 0;
white-space: nowrap;
}
/* The item of .cke_panel_list */
.cke_panel_listItem {
margin: 0;
padding-bottom: 1px;
}
/* The child of .cke_panel_listItem. These elements contain spans which are
to display a real name of the property which is visible for an end-user. */
.cke_panel_listItem a {
padding: 3px 4px;
display: block;
border: 1px solid #fff;
color: inherit !important;
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
border-radius: 2px;
&:hover, &:focus, &:active {
background-color: $primary-lighter;
}
}
/* IE6 */
* html .cke_panel_listItem a {
width : 100%;
/* IE is not able to inherit the color, so we must force it to black */
color: #000;
}
/* IE7 */
*:first-child+html .cke_panel_listItem a {
/* IE is not able to inherit the color, so we must force it to black */
color: #000;
}
.cke_panel_listItem.cke_selected a {
background-color: $primary-light;
outline: none;
}
.cke_hc .cke_panel_listItem a {
border-style: none;
}
.cke_hc .cke_panel_listItem a {
&:hover, &:focus, &:active {
border: 2px solid;
padding: 1px 2px;
}
}
/* The title of the entire panel which is visible on top of the list. */
.cke_panel_grouptitle {
font-size: 11px;
font-weight: bold;
white-space: nowrap;
margin: 0;
padding: 6px 6px;
color: #474747;
border-bottom: 1px solid $gray;
background: $gray-lighter;
&:first-child {
border-radius: $border-radius $border-radius 0 0;
}
}
/* The following styles set defaults of the elements used by the Paragraph
Format panel. */
.cke_panel_listItem {
p, h1, h2, h3, h4, h5, h6, pre {
margin-top: 0px;
margin-bottom: 0px;
}
}
/*
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/* "Source" button label */
.cke_button__source_label,
.cke_button__sourcedialog_label {
display: inline;
}
/* "Font Size" combo width */
.cke_combo__fontsize .cke_combo_text {
width: 30px;
}
/* "Font Size" panel size */
.cke_combopanel__fontsize {
width: 120px;
}
/* Editable regions */
.cke_source {
font-family: 'Courier New' , Monospace;
font-size: small;
background-color: #fff;
white-space: pre;
}
.cke_wysiwyg_frame, .cke_wysiwyg_div {
background-color: #fff;
}
/*
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/*
reset.css (part of editor.css)
================================
This file holds the "reset" requirements of CKEditor, as well as define the
default interface styles.
CKEditor includes two main "reset" class names in the DOM structure created for
editors:
* .cke_reset: Intended to reset a specific element, but not its children.
Because of this, only styles that will not be inherited can be defined.
* .cke_reset_all: Intended to reset not only the element holding it, but
also its child elements.
To understand why "reset" is needed, check the CKEditor Skin SDK:
http://docs.cksource.com/CKEditor_4.x/Skin_SDK/Reset
*/
/* Reset for single elements, not their children. */
.cke_reset {
/* Do not include inheritable rules here. */
margin: 0;
padding: 0;
border: 0;
background: transparent;
text-decoration: none;
width: auto;
height: auto;
vertical-align: baseline;
box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
position: static;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
transition: none;
}
/* Reset for elements and their children. */
.cke_reset_all, .cke_reset_all * {
/* The following must be identical to .cke_reset. */
margin: 0;
padding: 0;
border: 0;
background: transparent;
text-decoration: none;
width: auto;
height: auto;
vertical-align: baseline;
box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
position: static;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
transition: none;
/* These are rule inherited by all children elements. */
border-collapse: collapse;
font: normal normal normal 12px Arial,Helvetica,Tahoma,Verdana,Sans-Serif;
color: $gray-darker;
text-align: left;
white-space: nowrap;
cursor: auto;
float: none;
}
.cke_reset_all {
.cke_rtl * {
text-align: right;
}
/* Defaults for some elements. */
iframe {
vertical-align: inherit; /** For IE */
}
textarea {
white-space: pre;
}
textarea, input[type="text"], input[type="password"] {
cursor: text;
}
textarea[disabled], input[type="text"][disabled], input[type="password"][disabled] {
cursor: default;
}
fieldset {
padding: 10px;
margin-top: 10px;
border: 1px solid $hr-border;
legend {
padding: 0 5px;
}
}
select {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
}
/*
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/*
richcombo.css (part of editor.css)
=================================
This file holds the style set of the "Rich Combo" widget which is commonly used
in the toolbar. It doesn't, however, styles the panel that is displayed when
clicking on the combo, which is instead styled by panel.css.
The visual representation of a rich combo widget looks as follows:
+-- .cke_combo----------------------------------------------------------------------+
| +-- .cke_combo_label --+ +-- .cke_combo_button ---------------------------------+ |
| | | | +-- .cke_combo_text --+ +-- .cke_combo_open -------+ | |
| | | | | | | +-- .cke_combo_arrow --+ | | |
| | | | | | | | | | | |
| | | | | | | +----------------------+ | | |
| | | | +---------------------+ +--------------------------+ | |
| +----------------------+ +------------------------------------------------------+ |
+-----------------------------------------------------------------------------------+
*/
/* The box that hold the entire combo widget */
.cke_combo {
display: inline-block;
float: left;
}
.cke_rtl .cke_combo {
float: right;
}
.cke_hc .cke_combo {
margin-top: -2px;
}
/* The label of the combo widget. It is invisible by default, yet
it's important for semantics and accessibility. */
.cke_combo_label {
display: none;
float: left;
line-height: 26px;
vertical-align: top;
margin-right: 5px;
}
.cke_rtl .cke_combo_label {
float: right;
margin-left: 5px;
margin-right: 0;
}
/* The container for combo text and arrow. */
.cke_combo_button {
display: inline-block;
float: left;
margin: 0 6px 5px 0;
border: 1px solid $hr-border;
border-radius: $border-radius;
background: #fff;
}
/* Different states of the container. */
.cke_combo_off {
a.cke_combo_button {
&:hover, &:focus {
outline: none;
}
&:active {
border-color: $gray-darker;
}
}
}
.cke_combo_on {
a.cke_combo_button {
border-color: $gray-darker;
}
}
.cke_rtl .cke_combo_button {
float: right;
margin-left: 5px;
margin-right: 0;
}
.cke_hc a.cke_combo_button {
padding: 3px;
}
.cke_hc .cke_combo_on a.cke_combo_button {
border-width: 3px;
padding: 1px;
}
.cke_hc .cke_combo_off a.cke_combo_button {
&:hover, &:focus, &:active {
border-width: 3px;
padding: 1px;
}
}
/* The label that shows the current value of the rich combo.
By default, it holds the name of the property.
See: .cke_combo_inlinelabel */
.cke_combo_text {
line-height: 26px;
padding-left: 10px;
text-overflow: ellipsis;
overflow: hidden;
float: left;
cursor: default;
color: #474747;
width: 60px;
}
.cke_rtl .cke_combo_text {
float: right;
text-align: right;
padding-left: 0;
padding-right: 10px;
}
.cke_hc .cke_combo_text {
line-height: 18px;
font-size: 12px;
}
/* The handler which opens the panel of rich combo properties.
It holds an arrow as a visual indicator. */
.cke_combo_open {
cursor: default;
display: inline-block;
font-size: 0;
height: 19px;
line-height: 17px;
margin: 1px 7px 1px;
width: 5px;
}
.cke_hc .cke_combo_open {
height: 12px;
}
/* The arrow which is displayed inside of the .cke_combo_open handler. */
.cke_combo_arrow {
margin: 11px 0 0;
float: left;
/* Pure CSS Arrow */
height: 0;
width: 0;
font-size: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 3px solid $text-color;
}
.cke_hc .cke_combo_arrow {
font-size: 10px;
width: auto;
border: 0;
margin-top: 3px;
}
/* Disabled combo button styles. */
.cke_combo_disabled {
.cke_combo_inlinelabel, .cke_combo_open {
opacity: 0.3;
}
}
/*
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/*
toolbar.css (part of editor.css)
==================================
This files styles the CKEditor toolbar and its buttons. For toolbar combo
styles, check richcombo.css.
The toolbar is rendered as a big container (called toolbox), which contains
smaller "toolbars". Each toolbar represents a group of items that cannot be
separated. The following is the visual representation of the toolbox.
+-- .cke_toolbox ----------------------------------------------------------+
| +-- .cke_toolbar --+ +-- .cke_toolbar --+ ... +-- .cke_toolbar_break --+ |
| | | | | | | |
| +------------------+ +------------------+ +------------------------+ |
| +-- .cke_toolbar --+ +-- .cke_toolbar --+ ... |
| | | | | |
| +------------------+ +------------------+ |
+--------------------------------------------------------------------------+
The following instead is the visual representation of a single toolbar:
+-- .cke_toolbar ----------------------------------------------------------------+
| +-- .cke_toolbar_start --+ +-- .cke_toolgroup (*) --+ +-- .cke_toolbar_end --+ |
| | | | | | | |
| +------------------------+ +------------------------+ +----------------------+ |
+--------------------------------------------------------------------------------+
(*) .cke_toolgroup is available only when the toolbar items can be grouped
(buttons). If the items can't be group (combos), this box is not available
and the items are rendered straight in that place.
This file also styles toolbar buttons, which are rendered inside the above
.cke_toolgroup containers. This is the visual representation of a button:
+-- .cke_button -------------------------------------+
| +-- .cke_button_icon --+ +-- .cke_button_label --+ |
| | | | | |
| +----------------------+ +-----------------------+ |
+----------------------------------------------------+
Special outer level classes used in this file:
.cke_hc: Available when the editor is rendered on "High Contrast".
.cke_rtl: Available when the editor UI is on RTL.
*/
/* The box that holds each toolbar. */
.cke_toolbar {
float: left;
}
.cke_rtl .cke_toolbar {
float: right;
}
/* The box that holds buttons. */
.cke_toolgroup {
float: left;
margin: 0 6px 3px 0;
padding: 2px;
border: 1px solid $hr-border;
border-radius: $border-radius;
background: #fff;
}
.cke_hc .cke_toolgroup {
border: 0;
margin-right: 10px;
margin-bottom: 10px;
}
.cke_rtl .cke_toolgroup *:first-child {
border-radius: 0 $border-radius $border-radius 0;
}
.cke_rtl .cke_toolgroup *:last-child {
border-radius: $border-radius 0 0 $border-radius;
}
.cke_rtl .cke_toolgroup {
float: right;
margin-left: 6px;
margin-right: 0;
}
/* A toolbar button . */
a.cke_button {
display: inline-block;
height: 18px;
padding: 2px 4px;
outline: none;
cursor: default;
float: left;
border: 0;
border-radius: 2px;
}
.cke_rtl .cke_button {
float: right;
}
.cke_hc .cke_button {
border: 1px solid black;
/* Compensate the added border */
padding: 3px 5px;
margin: -2px 4px 0 -2px;
}
/* This class is applied to the button when it is "active" (pushed).
This style indicates that the feature associated with the button is active
i.e. currently writing in bold or when spell checking is enabled. */
.cke_button_on {
background: $primary-light;
}
.cke_hc {
.cke_button_on {
border-width: 3px;
/* Compensate the border change */
padding: 1px 3px;
}
a.cke_button_off, a.cke_button_disabled {
&:hover, &:focus, &:active {
border-width: 3px;
/* Compensate the border change */
padding: 1px 3px;
}
}
}
/* This class is applied to the button when the feature associated with the
button cannot be used (grayed-out).
i.e. paste button remains disabled when there is nothing in the clipboard to
be pasted. */
.cke_button_disabled .cke_button_icon {
opacity: 0.3;
}
.cke_hc .cke_button_disabled {
opacity: 0.5;
}
a.cke_button_on {
&:hover, &:focus, &:active {
}
}
a.cke_button_off, a.cke_button_disabled {
&:hover, &:focus, &:active {
background: $primary-lighter;
}
}
/* The icon which is a visual representation of the button. */
.cke_button_icon {
cursor: inherit;
background-repeat: no-repeat;
margin-top: 1px;
width: 16px;
height: 16px;
float: left;
display: inline-block;
}
.cke_rtl .cke_button_icon {
float: right;
}
.cke_hc .cke_button_icon {
display: none;
}
/* The label of the button that stores the name of the feature. By default,
labels are invisible. They can be revealed on demand though. */
.cke_button_label {
display: none;
padding-left: 3px;
margin-top: 1px;
line-height: 18px;
vertical-align: middle;
float: left;
cursor: default;
color: $gray-dark;
}
.cke_rtl .cke_button_label {
padding-right: 3px;
padding-left: 0;
float: right;
}
.cke_hc .cke_button_label {
padding: 0;
display: inline-block;
font-size: 12px;
}
/* The small arrow available on buttons that can be expanded
(e.g. the color buttons). */
.cke_button_arrow {
/* Arrow in CSS */
display: inline-block;
margin: 8px 0 0 1px;
width: 0;
height: 0;
cursor: default;
vertical-align: top;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 3px solid #474747;
}
.cke_rtl .cke_button_arrow {
margin-right: 5px;
margin-left: 0;
}
.cke_hc .cke_button_arrow {
font-size: 10px;
margin: 3px -2px 0 3px;
width: auto;
border: 0;
}
/* The vertical separator which is used within a single toolbar to split
buttons into sub-groups. */
.cke_toolbar_separator {
float: left;
background-color: $hr-border;
margin: 4px 2px 0;
height: 16px;
width: 1px;
}
.cke_rtl .cke_toolbar_separator {
float: right;
}
.cke_hc .cke_toolbar_separator {
width: 0;
border-left: 1px solid;
margin: 1px 5px 0 0px;
}
/* The dummy element that breaks toolbars.
Once it is placed, the very next toolbar is moved to the new row. */
.cke_toolbar_break {
display: block;
clear: left;
}
.cke_rtl .cke_toolbar_break {
clear: right;
}
/* The button, which when clicked hides (collapses) all the toolbars. */
.cke_toolbox_collapser {
width: 12px;
height: 11px;
float: right;
margin: 11px 0 0;
font-size: 0;
cursor: default;
text-align: center;
border: 1px solid #a6a6a6;
border-bottom-color: #979797;
border-radius: $border-radius;
background: #e4e4e4;
&:hover {
background: #ccc;
}
&.cke_toolbox_collapser_min {
margin: 0 2px 4px;
.cke_arrow {
margin-top: 4px;
border-bottom-color: transparent;
border-top-color: #474747;
}
}
/* The CSS arrow, which belongs to the toolbar collapser. */
.cke_arrow {
display: inline-block;
/* Pure CSS Arrow */
height: 0;
width: 0;
font-size: 0;
margin-top: 1px;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-bottom: 3px solid #474747;
border-top: 3px solid transparent;
}
}
.cke_rtl .cke_toolbox_collapser {
float: left;
}
.cke_hc .cke_toolbox_collapser .cke_arrow {
font-size: 8px;
width: auto;
border: 0;
margin-top: 0;
margin-right: 2px;
}
/*
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/*
editor.css
============
This is he heart of the skin system. This is the file loaded by the editor to
style all elements inside its main interface.
To make it easier to maintain, instead of including all styles here, we import
other files.
*/
/* Config files, where variables are defined */
@import "../config/config";
/* "Reset" styles, necessary to avoid the editor UI being broken by external CSS. */
@import "reset";
/* Styles the main interface structure (holding box). */
@import "mainui";
/* Styles all "panels", which are the floating elements that appear when
opening toolbar combos, menu buttons, context menus, etc. */
@import "panel";
/* Styles the color panel displayed by the color buttons. */
@import "colorpanel";
/* Styles to toolbar. */
@import "toolbar";
/* Styles menus, which are lists of selectable items (context menu, menu button). */
@import "menu";
/* Styles toolbar combos. */
@import "richcombo";
/* Styles the elements path bar, available at the bottom of the editor UI.*/
@import "elementspath";
/* Contains hard-coded presets for "configurable-like" options of the UI
(e.g. display labels on specific buttons) */
@import "presets";
/* Important!
To avoid showing the editor UI while its styles are still not available, the
editor creates it with visibility:hidden. Here, we restore the UI visibility. */
.cke_chrome {
visibility: inherit;
}
/* For accessibility purposes, several "voice labels" are present in the UI.
These are usually <span> elements that show not be visible, but that are
used by screen-readers to announce other elements. Here, we hide these
<spans>, in fact. */
.cke_voice_label {
display: none;
}
legend.cke_voice_label {
display: none;
}
/* ==========================================================================
Colors
This file is exclusively intended for setting up variables
Never add styles directly to this file
========================================================================== */
// Grays
// -------------------------
$gray-darker: #333;
$gray-dark: #555;
$gray: #aaa;
$gray-light: #ddd;
$gray-lighter: #eee;
// Primary
// -------------------------
$primary: #428bca;
$primary-light: #92bce0;
$primary-lighter: #e1edf7;
// Forms
// -------------------------
$form-blue: #66afe9;
// Blues
// -------------------------
$blue-dark: #2274c9;
$blue-dark-hover: #1e68b4;
$blue: #3F8EDF;
$blue-hover: #2981db;
// States
// -------------------------
$success: $blue;
$success-hover: $blue-hover;
$success-border: $blue-dark;
$success-border-hover: $blue-dark-hover;
$warning: #f0ad4e;
$danger: #d9534f;
$info: #5bc0de;
// Scaffolding
// -------------------------
$body-bg: #fff;
$text-color: $gray-darker;
// Links
// -------------------------
$link-color: $primary;
$link-hover-color: darken($link-color, 15%);
// Hr border color
// -------------------------
$hr-border: $gray-light;
/* ==========================================================================
Config
This file is exclusively intended for setting up imports
Never add styles directly to this file
========================================================================== */
@import "colors";
@import "defaults";
/* ==========================================================================
Defaults
This file is exclusively intended for setting up variables
Never add styles directly to this file
========================================================================== */
// Border radius
// -------------------------
$border-radius: 4px;
// Forms
// -------------------------
%input-style {
background-color: #fff;
outline: none;
width: 100%;
*width: 95%;
height: 30px;
padding: 4px 10px;
border: 1px solid $hr-border;
border-radius: $border-radius;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
&:focus {
border-color: $form-blue;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba($form-blue,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba($form-blue,.6);
}
}
/*
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
CKEDITOR.skin.name="bootstrapck";CKEDITOR.skin.ua_editor="ie,iequirks,ie7,ie8,gecko";CKEDITOR.skin.ua_dialog="ie,iequirks,ie7,ie8,opera";
CKEDITOR.skin.chameleon=function(){var b=function(){return function(b,e){for(var a=b.match(/[^#]./g),c=0;3>c;c++){var f=a,h=c,d;d=parseInt(a[c],16);d=("0"+(0>e?0|d*(1+e):0|d+(255-d)*e).toString(16)).slice(-2);f[h]=d}return"#"+a.join("")}}(),c=function(){var b=new CKEDITOR.template("background:#{to};background-image:-webkit-gradient(linear,lefttop,leftbottom,from({from}),to({to}));background-image:-moz-linear-gradient(top,{from},{to});background-image:-webkit-linear-gradient(top,{from},{to});background-image:-o-linear-gradient(top,{from},{to});background-image:-ms-linear-gradient(top,{from},{to});background-image:linear-gradient(top,{from},{to});filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='{from}',endColorstr='{to}');");return function(c,
a){return b.output({from:c,to:a})}}(),f={editor:new CKEDITOR.template("{id}.cke_chrome [border-color:{defaultBorder};] {id} .cke_top [ {defaultGradient}border-bottom-color:{defaultBorder};] {id} .cke_bottom [{defaultGradient}border-top-color:{defaultBorder};] {id} .cke_resizer [border-right-color:{ckeResizer}] {id} .cke_dialog_title [{defaultGradient}border-bottom-color:{defaultBorder};] {id} .cke_dialog_footer [{defaultGradient}outline-color:{defaultBorder};border-top-color:{defaultBorder};] {id} .cke_dialog_tab [{lightGradient}border-color:{defaultBorder};] {id} .cke_dialog_tab:hover [{mediumGradient}] {id} .cke_dialog_contents [border-top-color:{defaultBorder};] {id} .cke_dialog_tab_selected, {id} .cke_dialog_tab_selected:hover [background:{dialogTabSelected};border-bottom-color:{dialogTabSelectedBorder};] {id} .cke_dialog_body [background:{dialogBody};border-color:{defaultBorder};] {id} .cke_toolgroup [{lightGradient}border-color:{defaultBorder};] {id} a.cke_button_off:hover, {id} a.cke_button_off:focus, {id} a.cke_button_off:active [{mediumGradient}] {id} .cke_button_on [{ckeButtonOn}] {id} .cke_toolbar_separator [background-color: {ckeToolbarSeparator};] {id} .cke_combo_button [border-color:{defaultBorder};{lightGradient}] {id} a.cke_combo_button:hover, {id} a.cke_combo_button:focus, {id} .cke_combo_on a.cke_combo_button [border-color:{defaultBorder};{mediumGradient}] {id} .cke_path_item [color:{elementsPathColor};] {id} a.cke_path_item:hover, {id} a.cke_path_item:focus, {id} a.cke_path_item:active [background-color:{elementsPathBg};] {id}.cke_panel [border-color:{defaultBorder};] "),
panel:new CKEDITOR.template(".cke_panel_grouptitle [{lightGradient}border-color:{defaultBorder};] .cke_menubutton_icon [background-color:{menubuttonIcon};] .cke_menubutton:hover .cke_menubutton_icon, .cke_menubutton:focus .cke_menubutton_icon, .cke_menubutton:active .cke_menubutton_icon [background-color:{menubuttonIconHover};] .cke_menuseparator [background-color:{menubuttonIcon};] a:hover.cke_colorbox, a:focus.cke_colorbox, a:active.cke_colorbox [border-color:{defaultBorder};] a:hover.cke_colorauto, a:hover.cke_colormore, a:focus.cke_colorauto, a:focus.cke_colormore, a:active.cke_colorauto, a:active.cke_colormore [background-color:{ckeColorauto};border-color:{defaultBorder};] ")};
return function(g,e){var a=g.uiColor,a={id:"."+g.id,defaultBorder:b(a,-0.1),defaultGradient:c(b(a,0.9),a),lightGradient:c(b(a,1),b(a,0.7)),mediumGradient:c(b(a,0.8),b(a,0.5)),ckeButtonOn:c(b(a,0.6),b(a,0.7)),ckeResizer:b(a,-0.4),ckeToolbarSeparator:b(a,0.5),ckeColorauto:b(a,0.8),dialogBody:b(a,0.7),dialogTabSelected:c("#FFFFFF","#FFFFFF"),dialogTabSelectedBorder:"#FFF",elementsPathColor:b(a,-0.6),elementsPathBg:a,menubuttonIcon:b(a,0.5),menubuttonIconHover:b(a,0.3)};return f[e].output(a).replace(/\[/g,
"{").replace(/\]/g,"}")}}();
\ No newline at end of file
...@@ -7,6 +7,7 @@ CKEDITOR.editorConfig = function( config ) { ...@@ -7,6 +7,7 @@ CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. // Define changes to default configuration here.
// For the complete reference: // For the complete reference:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config // http://docs.ckeditor.com/#!/api/CKEDITOR.config
config.skin = 'bootstrapck';
// The toolbar groups arrangement, optimized for two toolbar rows. // The toolbar groups arrangement, optimized for two toolbar rows.
config.toolbarGroups = [ config.toolbarGroups = [
......
input.cke_dialog_ui_input_password,input.cke_dialog_ui_input_text,textarea.cke_dialog_ui_input_textarea{background-color:#fff;outline:0;width:100%;*width:95%;height:30px;padding:4px 10px;border:1px solid #ddd;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}input.cke_dialog_ui_input_password:focus,input.cke_dialog_ui_input_text:focus,textarea.cke_dialog_ui_input_textarea:focus{border-color:#66afe9;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}.cke_dialog{visibility:visible}.cke_dialog_body{z-index:1;background:#eee;border:1px solid #ddd;border-radius:4px}.cke_browser_gecko19 .cke_dialog_body{position:relative}.cke_dialog strong{font-weight:700}.cke_dialog_title{font-weight:700;font-size:13px;cursor:move;position:relative;color:#333;border-bottom:1px solid #ddd;padding:10px 12px;background:#eee}.cke_dialog_contents{background-color:#fff;overflow:auto;padding:15px 10px 5px;margin-top:35px;border-top:1px solid #ddd;border-radius:0 0 4px 4px}.cke_dialog_contents_body{overflow:auto;padding:17px 10px 5px;margin-top:22px}.cke_dialog_footer{text-align:right;position:relative;border-radius:0 0 4px 4px;border-top:1px solid #ddd;background:#eee}.cke_rtl .cke_dialog_footer{text-align:left}.cke_hc .cke_dialog_footer{outline:0;border-top:1px solid #fff}.cke_dialog .cke_resizer{margin-top:28px}.cke_dialog .cke_resizer_rtl{margin-left:5px}.cke_dialog .cke_resizer_ltr{margin-right:5px}.cke_dialog_tabs{height:24px;display:inline-block;margin:10px 0 0;position:absolute;z-index:2;left:10px}.cke_rtl .cke_dialog_tabs{right:10px}a.cke_dialog_tab{height:16px;padding:4px 8px;margin-right:3px;display:inline-block;cursor:pointer;line-height:16px;outline:0;color:#555;border:1px solid #ddd;border-radius:3px 3px 0 0;background:#f3f3f3}.cke_rtl a.cke_dialog_tab{margin-right:0;margin-left:3px}a.cke_dialog_tab:hover{background:#ddd;text-decoration:none}a.cke_dialog_tab_selected{background:#fff;color:#333;border-bottom-color:#fff;cursor:default;filter:none}a.cke_dialog_tab_selected:hover{background:#fff}.cke_hc a.cke_dialog_tab:hover,.cke_hc a.cke_dialog_tab_selected{border:3px solid;padding:2px 6px}a.cke_dialog_tab_disabled{color:#bababa;cursor:default}.cke_dialog_tabs .cke_dialog_ui_input_select{top:-7px!important}.cke_single_page .cke_dialog_tabs{display:none}.cke_single_page .cke_dialog_contents{padding-top:5px;margin-top:0;border-top:0}.cke_dialog_close_button{background-image:url(images/close.png);background-repeat:no-repeat;background-position:0 0;position:absolute;cursor:pointer;text-align:center;height:20px;width:20px;top:9px;z-index:5}.cke_hidpi .cke_dialog_close_button{background-image:url(images/hidpi/close.png);background-size:16px}.cke_dialog_close_button span{display:none}.cke_hc .cke_dialog_close_button span{display:inline;cursor:pointer;font-weight:700;position:relative;top:3px}.cke_ltr .cke_dialog_close_button{right:5px}.cke_rtl .cke_dialog_close_button{left:6px}div.cke_disabled .cke_dialog_ui_labeled_content div *{background-color:#ddd;cursor:default}.cke_dialog_ui_hbox table,.cke_dialog_ui_vbox table{margin:auto}.cke_dialog_ui_vbox{margin-top:5px}.cke_dialog_ui_vbox_child{padding:5px 0}.cke_dialog_ui_hbox{width:100%}.cke_dialog_ui_hbox_child,.cke_dialog_ui_hbox_first,.cke_dialog_ui_hbox_last{vertical-align:top}.cke_dialog_ui_hbox_first>.cke_dialog_ui_html,.cke_dialog_ui_hbox_first>.cke_dialog_ui_labeled_label,.cke_dialog_ui_hbox_last>.cke_dialog_ui_html,.cke_dialog_ui_hbox_last>.cke_dialog_ui_labeled_label{line-height:30px}.cke_ltr .cke_dialog_ui_hbox_child,.cke_ltr .cke_dialog_ui_hbox_first{padding-right:10px}.cke_rtl .cke_dialog_ui_hbox_child,.cke_rtl .cke_dialog_ui_hbox_first{padding-left:10px}.cke_ltr .cke_dialog_footer_buttons .cke_dialog_ui_hbox_child,.cke_ltr .cke_dialog_footer_buttons .cke_dialog_ui_hbox_first{padding-right:5px}.cke_rtl .cke_dialog_footer_buttons .cke_dialog_ui_hbox_child,.cke_rtl .cke_dialog_footer_buttons .cke_dialog_ui_hbox_first{padding-left:5px;padding-right:0}.cke_hc div.cke_dialog_ui_input_file,.cke_hc div.cke_dialog_ui_input_password,.cke_hc div.cke_dialog_ui_input_select,.cke_hc div.cke_dialog_ui_input_text,.cke_hc div.cke_dialog_ui_input_textarea{border:1px solid}.cke_dialog_ui_text{margin-bottom:7px}.cke_dialog_ui_select{height:auto!important;margin-bottom:7px}textarea.cke_dialog_ui_input_textarea{overflow:auto;resize:none}a.cke_dialog_ui_button{display:inline-block;*display:inline;*zoom:1;padding:3px 0;margin:0;text-align:center;color:#333;vertical-align:middle;cursor:pointer;border:1px solid #ddd;border-radius:4px;background:#fff}a.cke_dialog_ui_button:active,a.cke_dialog_ui_button:focus,a.cke_dialog_ui_button:hover{border-color:#aaa;background-color:#eee;text-decoration:none}.cke_dialog_page_contents a.cke_dialog_ui_button{height:22px;line-height:22px;background-color:#f4f4f4}.cke_dialog_page_contents a.cke_dialog_ui_button:active,.cke_dialog_page_contents a.cke_dialog_ui_button:focus,.cke_dialog_page_contents a.cke_dialog_ui_button:hover{background-color:#eee}span.cke_dialog_ui_button{padding:0 12px}.cke_hc a.cke_dialog_ui_button:active,.cke_hc a.cke_dialog_ui_button:focus,.cke_hc a.cke_dialog_ui_button:hover{border:3px solid;padding-top:1px;padding-bottom:1px}.cke_hc a.cke_dialog_ui_button:active span,.cke_hc a.cke_dialog_ui_button:focus span,.cke_hc a.cke_dialog_ui_button:hover span{padding-left:10px;padding-right:10px}.cke_dialog_footer_buttons a.cke_dialog_ui_button span{color:inherit;font-size:12px;line-height:20px}a.cke_dialog_ui_button_ok{color:#fff;border-color:#2274c9;background:#3f8edf}a.cke_dialog_ui_button_ok:active,a.cke_dialog_ui_button_ok:focus,a.cke_dialog_ui_button_ok:hover{border-color:#1e68b4;background:#2981db}a.cke_dialog_ui_button_cancel{background-color:#fff}a.cke_dialog_ui_button_cancel:focus{outline:0}span.cke_dialog_ui_button{cursor:pointer}.cke_dialog_footer_buttons{display:inline-table;margin:10px;width:auto;position:relative;vertical-align:middle}div.cke_dialog_ui_input_select{display:table}select.cke_dialog_ui_input_select{height:30px;line-height:30px;background-color:#fff;padding:4px 10px;border:1px solid #ddd;outline:0;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}.cke_dialog_ui_input_file{width:100%;height:30px}.cke_hc .cke_dialog_ui_labeled_content input:focus,.cke_hc .cke_dialog_ui_labeled_content select:focus,.cke_hc .cke_dialog_ui_labeled_content textarea:focus{outline:1px dotted}.cke_dialog .cke_dark_background,.cke_dialog .cke_light_background{background-color:#eee}.cke_dialog .cke_centered{text-align:center}.cke_dialog a.cke_btn_reset{float:right;background:url(images/refresh.png) top left no-repeat;width:16px;height:16px;border:1px none;font-size:1px}.cke_dialog a.cke_btn_locked,.cke_dialog a.cke_btn_unlocked{float:left;width:16px;height:16px;background-repeat:no-repeat;border:none 1px;font-size:1px}.cke_dialog a.cke_btn_locked{background-image:url(images/lock.png)}.cke_dialog a.cke_btn_locked .cke_icon{display:none}.cke_dialog a.cke_btn_unlocked{background-image:url(images/lock-open.png)}.cke_dialog .cke_btn_over{border:outset 1px;cursor:pointer}.cke_hidpi .cke_dialog a.cke_btn_reset{background-size:16px;background-image:url(images/hidpi/refresh.png)}.cke_hidpi .cke_dialog a.cke_btn_locked,.cke_hidpi .cke_dialog a.cke_btn_unlocked{background-size:16px}.cke_hidpi .cke_dialog a.cke_btn_locked{background-image:url(images/hidpi/lock.png)}.cke_hidpi .cke_dialog a.cke_btn_unlocked{background-image:url(images/hidpi/lock-open.png)}.cke_rtl .cke_dialog a.cke_btn_reset{float:left}.cke_rtl .cke_dialog a.cke_btn_locked,.cke_rtl .cke_dialog a.cke_btn_unlocked{float:right}.cke_dialog .FlashPreviewBox,.cke_dialog .ImagePreviewBox{border:1px solid #aaa;border-radius:4px;padding:6px 10px;margin-top:5px;background-color:#fff}.cke_dialog .ImagePreviewBox{overflow:scroll;height:205px;width:300px}.cke_dialog .ImagePreviewBox table td{white-space:normal}.cke_dialog .FlashPreviewBox{white-space:normal;overflow:auto;height:160px;width:390px}.cke_dialog .ImagePreviewLoader{position:absolute;white-space:normal;overflow:hidden;height:160px;width:230px;margin:2px;padding:2px;opacity:.9;filter:alpha(opacity=90);background-color:#e4e4e4}.cke_dialog .cke_pastetext{width:346px;height:170px}.cke_dialog .cke_pastetext textarea{width:340px;height:170px;resize:none}.cke_dialog iframe.cke_pasteframe{width:346px;height:130px;background-color:#fff;border:1px solid #aeb3b9;border-radius:4px}.cke_dialog .cke_hand{cursor:pointer}.cke_disabled{color:#a0a0a0}.cke_dialog_body .cke_label{display:none}.cke_dialog_body label{display:inline-block;margin-bottom:3px;cursor:default}.cke_dialog_body label.cke_required{font-weight:700}.cke_dialog_ui_html{line-height:150%}a.cke_smile{overflow:hidden;display:block;text-align:center;padding:.3em 0}a.cke_smile img{vertical-align:middle}a.cke_specialchar{cursor:inherit;display:block;height:1.25em;padding:.2em .3em;text-align:center}a.cke_smile,a.cke_specialchar{background-color:#eee;border:1px solid transparent;vertical-align:top}a.cke_smile:active,a.cke_smile:focus,a.cke_smile:hover,a.cke_specialchar:active,a.cke_specialchar:focus,a.cke_specialchar:hover{background:#fff;outline:0}a.cke_smile:hover,a.cke_specialchar:hover{border-color:#aaa}a.cke_smile:active,a.cke_smile:focus,a.cke_specialchar:active,a.cke_specialchar:focus{border-color:#428bca}.cke_dialog_contents a.colorChooser{display:block;margin-top:6px;margin-left:10px;width:80px}.cke_rtl .cke_dialog_contents a.colorChooser{margin-right:10px}.cke_dialog_ui_checkbox{display:inline-block;margin-bottom:5px}.cke_btn_over,.cke_dialog_ui_checkbox_input:focus,.cke_dialog_ui_radio_input:focus{outline:1px dotted #696969}.cke_iframe_shim{display:block;position:absolute;top:0;left:0;z-index:-1;filter:alpha(opacity=0);width:100%;height:100%}
\ No newline at end of file
BootstrapCK Skin
====================
The BootstrapCK-Skin is a skin for [CKEditor4](http://ckeditor.com/) based on [Twitter Bootstrap3](http://getbootstrap.com/) styles.
[Sass](http://sass-lang.com/) is used to rewrite the editor's styles and [Grunt](http://gruntjs.com/) to be able to watch, convert and minify the sass into css files. These files aren't really needed for the simple use of the skin, but handy if you want to make some adjustments to it.
For more information about skins, please check the [CKEditor Skin SDK](http://docs.cksource.com/CKEditor_4.x/Skin_SDK)
documentation.
## Installation
**Just skin please**
Add the whole bootstrapck folder to the skin folder.<br />
In ckeditor.js and config.js change the skin name to "bootstrapck".<br />
Done!
**The whole skin - sass - grunt package**
All the sass files are included in the bootstrapck folder, so first follow the 'just skin please'-steps<br />
Now add the Gruntfile.js and the package.json to de ckeditor folder.
npm install
grunt build
You can start tampering now.
## Demo
http://kunstmaan.github.io/BootstrapCK4-Skin/
### Previous version
If you would like to get the Bootstrap2 skin for CKeditor3, [here](https://github.com/Kunstmaan/BootstrapCK-Skin)'s the previous version.
body{margin-top:1.0em;background-color:#fff;font-family:Helvetica,Arial,sans-serif;color:#404040}.container{margin:0 auto;width:900px;padding:0 0 20px}h1{font-size:40px;margin:40px 0 28px;padding:110px 0 9px;border-bottom:1px solid #ccc}h1 a,h1 a:visited,h1 a:focus,h1 a:hover{color:#404040;text-decoration:none}h1 span{font-size:18px;font-weight:normal;color:#bfbfbf}h1 span a,h1 span a:visited,h1 span a:focus,h1 span a:hover{color:#bfbfbf}h1 a{text-decoration:none}h2{font-size:23px;margin:10px 0 8px}h3{font-size:16px;margin:10px 0 8px}p{margin:0 0 30px;font-size:13px;line-height:18px}a,a:visited,a:focus{color:#0069d6;text-decoration:none}a:hover{color:#00438a;text-decoration:underline}.download{float:right}pre{background:#f5f5f5;color:#404040;padding:16px;border:1px solid rgba(0,0,0,0.05);border-radius:4px;box-shadow:0 1px 1px rgba(0,0,0,0.05) inset;margin:-20px 0 10px;line-height:200%}.twitter{margin:-20px 0 40px;color:#666}.twitter iframe{vertical-align:bottom;margin:0 0 0 5px}.footer{text-align:center;padding-top:20px;margin-top:60px;font-size:14px;color:#808080;border-top:1px solid #ccc}.footer a,.footer a:visited,.footer a:focus{color:#333}.footer a:hover{color:#000}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment