diff --git a/CHANGES.md b/CHANGES.md
index 558d411ca4a..ecfda3e09a2 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -32,6 +32,7 @@ Fixed Issues:
Other Changes:
+* [#13119](http://dev.ckeditor.com/ticket/13119): Improved compatibility of editor skins ([Moono](http://ckeditor.com/addon/moono) and [Kama](http://ckeditor.com/addon/kama)) with external web page style sheets.
* Toolbar configurators:
* [#13147](http://dev.ckeditor.com/ticket/13147): Add buttons to the sticky toolbar.
* [#13207](http://dev.ckeditor.com/ticket/13207): Use modal window to display help in toolbar configurator.
diff --git a/skins/kama/dialog.css b/skins/kama/dialog.css
index 25f0a4c2bdb..28a43614109 100644
--- a/skins/kama/dialog.css
+++ b/skins/kama/dialog.css
@@ -250,7 +250,7 @@ a.cke_dialog_tab_disabled
/* The close button at the top of the dialog. */
-.cke_dialog_close_button
+a.cke_dialog_close_button
{
background-image: url(images/sprites.png);
background-repeat: no-repeat;
diff --git a/skins/kama/elementspath.css b/skins/kama/elementspath.css
index c4c5895ff8b..fa974121d7d 100644
--- a/skins/kama/elementspath.css
+++ b/skins/kama/elementspath.css
@@ -27,10 +27,10 @@ The following is a visual representation of its main elements:
}
/* Each item of the elements path. */
-.cke_path_item,
+a.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
+span.cke_path_empty
{
display: inline-block;
float: left;
diff --git a/skins/kama/presets.css b/skins/kama/presets.css
index ca690305171..78d34c0dcc4 100644
--- a/skins/kama/presets.css
+++ b/skins/kama/presets.css
@@ -23,12 +23,16 @@ For licensing, see LICENSE.md or http://ckeditor.com/license
}
/* Editable regions */
-.cke_source
+textarea.cke_source
{
font-family: 'Courier New', Monospace;
font-size: small;
background-color: #fff;
white-space: pre-wrap;
+ border: none;
+ padding: 0;
+ margin: 0;
+ display: block;
}
.cke_wysiwyg_frame, .cke_wysiwyg_div
diff --git a/skins/kama/reset.css b/skins/kama/reset.css
index 752adf5727c..19721f21372 100644
--- a/skins/kama/reset.css
+++ b/skins/kama/reset.css
@@ -46,7 +46,8 @@ http://docs.cksource.com/CKEditor_4.x/Skin_SDK/Reset
}
/* Reset for elements and their children. */
-.cke_reset_all, .cke_reset_all *
+.cke_reset_all, .cke_reset_all *,
+.cke_reset_all a, .cke_reset_all textarea
{
/* The following must be identical to .cke_reset. */
margin: 0;
@@ -73,6 +74,7 @@ http://docs.cksource.com/CKEditor_4.x/Skin_SDK/Reset
text-align: left;
white-space: nowrap;
cursor: auto;
+ float: none;
}
.cke_reset_all .cke_rtl *
diff --git a/skins/kama/richcombo.css b/skins/kama/richcombo.css
index aa53af7b2ac..a2a6aec4487 100644
--- a/skins/kama/richcombo.css
+++ b/skins/kama/richcombo.css
@@ -57,7 +57,7 @@ The visual representation of a rich combo widget looks as follows:
}
/* The container for combo text and arrow. */
-.cke_combo_button
+a.cke_combo_button
{
display: inline-block;
-moz-border-radius: 5px;
diff --git a/skins/kama/toolbar.css b/skins/kama/toolbar.css
index 517d43a1f6b..18f4e2463e3 100644
--- a/skins/kama/toolbar.css
+++ b/skins/kama/toolbar.css
@@ -135,7 +135,7 @@ a.cke_button
/* 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
+a.cke_button_on
{
background-color: #a3d7ff;
}
@@ -150,7 +150,7 @@ a.cke_button
/* This class is applied to the button when the feature associated with the
button is available but currently not active.*/
-.cke_button_off
+a.cke_button_off
{
opacity: 0.7;
}
@@ -159,7 +159,7 @@ a.cke_button
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
+a.cke_button_disabled
{
opacity: 0.3;
}
@@ -309,7 +309,7 @@ a.cke_button_off:active
}
/* The button, which when clicked hides (collapses) all the toolbars. */
-.cke_toolbox_collapser
+a.cke_toolbox_collapser
{
width: 12px;
height: 11px;
diff --git a/skins/moono/dialog.css b/skins/moono/dialog.css
index 5fed9e86f85..7f5f328ab6f 100644
--- a/skins/moono/dialog.css
+++ b/skins/moono/dialog.css
@@ -317,7 +317,7 @@ a.cke_dialog_tab_disabled
/* The close button at the top of the dialog. */
-.cke_dialog_close_button
+a.cke_dialog_close_button
{
background-image: url(images/close.png);
background-repeat: no-repeat;
@@ -327,7 +327,7 @@ a.cke_dialog_tab_disabled
text-align: center;
height: 20px;
width: 20px;
- top: 5px;
+ top: 4px;
z-index: 5;
opacity: 0.8;
filter: alpha(opacity = 80);
diff --git a/skins/moono/elementspath.css b/skins/moono/elementspath.css
index 106bec2634b..431ab48c770 100644
--- a/skins/moono/elementspath.css
+++ b/skins/moono/elementspath.css
@@ -27,10 +27,10 @@ The following is a visual representation of its main elements:
}
/* Each item of the elements path. */
-.cke_path_item,
+a.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
+span.cke_path_empty
{
display: inline-block;
float: left;
diff --git a/skins/moono/presets.css b/skins/moono/presets.css
index ca690305171..78d34c0dcc4 100644
--- a/skins/moono/presets.css
+++ b/skins/moono/presets.css
@@ -23,12 +23,16 @@ For licensing, see LICENSE.md or http://ckeditor.com/license
}
/* Editable regions */
-.cke_source
+textarea.cke_source
{
font-family: 'Courier New', Monospace;
font-size: small;
background-color: #fff;
white-space: pre-wrap;
+ border: none;
+ padding: 0;
+ margin: 0;
+ display: block;
}
.cke_wysiwyg_frame, .cke_wysiwyg_div
diff --git a/skins/moono/reset.css b/skins/moono/reset.css
index 4de313883c1..3207b46661e 100644
--- a/skins/moono/reset.css
+++ b/skins/moono/reset.css
@@ -46,7 +46,8 @@ http://docs.cksource.com/CKEditor_4.x/Skin_SDK/Reset
}
/* Reset for elements and their children. */
-.cke_reset_all, .cke_reset_all *
+.cke_reset_all, .cke_reset_all *,
+.cke_reset_all a, .cke_reset_all textarea
{
/* The following must be identical to .cke_reset. */
margin: 0;
diff --git a/skins/moono/richcombo.css b/skins/moono/richcombo.css
index e2571e983f0..c8eb1afc2ce 100644
--- a/skins/moono/richcombo.css
+++ b/skins/moono/richcombo.css
@@ -60,7 +60,7 @@ The visual representation of a rich combo widget looks as follows:
}
/* The container for combo text and arrow. */
-.cke_combo_button
+a.cke_combo_button
{
cursor: default;
display: inline-block;
diff --git a/skins/moono/toolbar.css b/skins/moono/toolbar.css
index fdf6143ba5f..cf197e7c1b7 100644
--- a/skins/moono/toolbar.css
+++ b/skins/moono/toolbar.css
@@ -147,7 +147,7 @@ a.cke_button
/* 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
+a.cke_button_on
{
-moz-box-shadow: 0 1px 5px rgba(0,0,0,.6) inset, 0 1px 0 rgba(0,0,0,.2);
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,.6) inset, 0 1px 0 rgba(0,0,0,.2);
@@ -348,7 +348,7 @@ a.cke_button_disabled:active
}
/* The button, which when clicked hides (collapses) all the toolbars. */
-.cke_toolbox_collapser
+a.cke_toolbox_collapser
{
width: 12px;
height: 11px;
diff --git a/tests/core/skin/manual/_assets/styles.css b/tests/core/skin/manual/_assets/styles.css
new file mode 100644
index 00000000000..1ec9e071c53
--- /dev/null
+++ b/tests/core/skin/manual/_assets/styles.css
@@ -0,0 +1,56 @@
+/*
+There's only sense testing rules with specificity 11
+because CKEditor's reset is not able to override higher ones.
+It also only makes sense to test some reasonable selectors.
+It is of course possible to do:
+.styled * { float: left }
+but it's unrealistic and it would be a developer's fault.
+Realistic, imprecise styles are based on specific tag names like `a` or `table`.
+*/
+
+* {
+ box-sizing: border-box;
+ font-family: Courier;
+ font-size: 20px;
+}
+
+input, textarea, a, label {
+ border: solid 5px blue;
+ padding: 5px;
+ text-decoration: underline;
+}
+
+table {
+ table-layout: fixed;
+ width: 800px;
+ float: right;
+ border: solid 2px blue;
+}
+
+p, h1 {
+ color: red;
+}
+
+iframe {
+ width: 500px;
+ border: solid 2px green;
+}
+
+/* Links are pretty often styled with similar styles
+and are used by us in many places in the UI. */
+.styled a {
+ text-decoration: underline;
+ border: solid 2px green;
+ color: red;
+ font-size: 15px;
+ background: blue;
+ padding: 5px;
+}
+
+.styled textarea {
+ margin: 20px;
+ padding: 10px;
+ border: solid 5px red;
+ width: 200px;
+ background: red;
+}
\ No newline at end of file
diff --git a/tests/core/skin/manual/reset.html b/tests/core/skin/manual/reset.html
new file mode 100644
index 00000000000..434e6dfbce3
--- /dev/null
+++ b/tests/core/skin/manual/reset.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
Foo
+
Foo
+
Foo
+
Foo
+
+
+
+
\ No newline at end of file
diff --git a/tests/core/skin/manual/reset.md b/tests/core/skin/manual/reset.md
new file mode 100644
index 00000000000..b64695640bd
--- /dev/null
+++ b/tests/core/skin/manual/reset.md
@@ -0,0 +1,10 @@
+@bender-tags: 4.5.0, tc
+@bender-ckeditor-plugins: wysiwygarea, sourcearea, toolbar, basicstyles, colorbutton, image, font,about, language, elementspath, resize, justify, undo
+@bender-ui: collapsed
+
+Test whether skin of the editor was not affected by page's styling. Check:
+
+* Links in the elements path.
+* All dialogs.
+* Sourcearea.
+* Button states.
\ No newline at end of file
diff --git a/tests/core/skin/manual/resetkama.html b/tests/core/skin/manual/resetkama.html
new file mode 100644
index 00000000000..6035ee3b6af
--- /dev/null
+++ b/tests/core/skin/manual/resetkama.html
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+
Foo
+
Foo
+
Foo
+
Foo
+
+
+
+
\ No newline at end of file
diff --git a/tests/core/skin/manual/resetkama.md b/tests/core/skin/manual/resetkama.md
new file mode 100644
index 00000000000..8f23c111a59
--- /dev/null
+++ b/tests/core/skin/manual/resetkama.md
@@ -0,0 +1,10 @@
+@bender-tags: 4.5.0, tc
+@bender-ckeditor-plugins: wysiwygarea, sourcearea, toolbar, basicstyles, colorbutton, image, font, about, language, elementspath, resize, justify, undo
+@bender-ui: collapsed
+
+Test whether skin of the editor was not affected by page's styling. Check:
+
+* Links in the elements path.
+* All dialogs.
+* Sourcearea.
+* Button states.
\ No newline at end of file