Fixed: Bottom space should not be visible when empty, bad toolbar mar…

…gins with toolbarLocation=bottom.
ucefkh · Nov 14, 2012 · a09e4aa · a09e4aa
1 parent 32fda4e
commit a09e4aa
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 19 deletions.
diff --git a/skins/moono/editor_gecko.css b/skins/moono/editor_gecko.css
@@ -13,11 +13,6 @@ 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 url("editor.css");
 
-.cke_bottom
-{
-	padding-bottom: 3px;
-}
-
 .cke_combo_text
 {
 	margin-bottom: -1px;

diff --git a/skins/moono/editor_ie7.css b/skins/moono/editor_ie7.css
@@ -13,6 +13,14 @@ 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 url("editor_ie.css");
 
+/*	Without the following code IE7 will display these containers large
+	even when no content is inside (for example: no elementspath, no resizer). */
+.cke_top,
+.cke_bottom
+{
+	font-size: 0px;
+}
+
 .cke_rtl .cke_toolgroup,
 .cke_rtl .cke_toolbar_separator,
 .cke_rtl .cke_button,
@@ -89,14 +97,20 @@ a.cke_button
 	background-color: #c0c0c0;
 }
 
-.cke_toolbox_collapser .cke_arrow
-{
-	margin-top: 0;
+.cke_toolbox_collapser {
+	margin-top: 15px;
 }
+
+.cke_toolbox_collapser.cke_toolbox_collapser_min {
+	margin-top: 3px;
+}
+
 .cke_toolbox_collapser .cke_arrow
 {
+	margin-top: 0;
 	border-width:4px;
 }
+
 .cke_toolbox_collapser.cke_toolbox_collapser_min .cke_arrow
 {
 	border-width:3px;

diff --git a/skins/moono/elementspath.css b/skins/moono/elementspath.css
@@ -33,8 +33,8 @@ The following is a visual representation of its main elements:
 {
 	display: inline-block;
 	float: left;
-	padding: 3px 4px;
-	margin-right: 2px;
+	padding: 4px;
+	margin: 4px 0 4px 2px;
 	cursor: default;
 	text-decoration: none;
 	outline: 0;

diff --git a/skins/moono/mainui.css b/skins/moono/mainui.css
@@ -68,14 +68,14 @@ Special outer level classes used in this file:
 
 	background: #fff;
 	padding: 0;
+	overflow: hidden;
 }
 
 /* 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;
+	border-width: 1px 0 0;
 }
 
 .cke_float .cke_inner
@@ -101,7 +101,10 @@ Special outer level classes used in this file:
 {
 	/*border: 1px solid #b2b2b2;*/
 	border-bottom: 1px solid #b6b6b6;
-	padding: 6px 8px 2px;
+	padding: 0 5px;
+
+	/* The following negative margin hides the bottom border when .cke_top is empty. */
+	margin-top: -1px;
 
 	-moz-box-shadow: 0 1px 0 #fff inset;
 	-webkit-box-shadow: 0 1px 0 #fff inset;
@@ -125,11 +128,14 @@ Special outer level classes used in this file:
 
 .cke_bottom
 {
-	padding: 4px 8px;
+	padding: 0 5px;
 	position: relative;
 
 	border-top: 1px solid #bfbfbf;
 
+	/* The following negative margin hides the bottom border when .cke_bottom is empty. */
+	margin-bottom: -1px;
+
 	-moz-box-shadow: 0 1px 0 #fff inset;
 	-webkit-box-shadow: 0 1px 0 #fff inset;
 	box-shadow: 0 1px 0 #fff inset;
@@ -144,7 +150,6 @@ Special outer level classes used in this file:
 	filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ffebebeb', endColorstr='#cfd1cf');
 }
 
-
 /* 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
@@ -164,7 +169,10 @@ Special outer level classes used in this file:
 	font-size: 0;
 	vertical-align: bottom;
 
-	margin-top: 8px;
+	margin-top: 14px;
+	/* 	The following margin is to keep the bottom separation
+		when elementspath is missing and resizer is the only element in container. */
+	margin-bottom: 5px;
 
 	-moz-box-shadow: 0 1px 0 rgba(255,255,255,.3);
 	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.3);
@@ -177,14 +185,15 @@ Special outer level classes used in this file:
 	width: auto;
 	height: auto;
 	border-width: 0;
+	margin-top: 6px;
+	margin-bottom: 0px;
 }
 
 .cke_resizer_ltr
 {
 	cursor: se-resize;
-
 	float: right;
-	margin-right: -4px;
+	margin-left: 1px;
 }
 
 /* This class is added in RTL mode. This is a special case for the resizer

diff --git a/skins/moono/toolbar.css b/skins/moono/toolbar.css
@@ -337,13 +337,19 @@ a.cke_button_off:active
 	clear: right;
 }
 
+.cke_toolbox
+{
+	margin-top: 6px;
+	display: block;
+}
+
 /* The button, which when clicked hides (collapses) all the toolbars. */
 .cke_toolbox_collapser
 {
 	width: 12px;
 	height: 11px;
 	float: right;
-	margin: 11px 0 0;
+	margin: 14px 0 0;
 	font-size: 0;
 	cursor: default;
 	text-align: center;