Fixed hover/focus/active styles in HC.

ckeditor · Nov 8, 2012 · 9a35b1c · 9a35b1c
1 parent 8ff85ea
commit 9a35b1c
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 18 deletions.
diff --git a/skins/moono/dialog.css b/skins/moono/dialog.css
@@ -391,6 +391,17 @@ It is possible to have nested V/H-Boxes.
 	padding-right: 0;
 }
 
+/* Applies to all labeled dialog fields */
+
+.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: 1px solid;
+}
+
 /*
 Text Input
 ------------
@@ -506,15 +517,6 @@ textarea.cke_dialog_ui_input_textarea:focus
 	box-shadow: 0 1px 0 rgba(0,0,0,.05) inset, 0 0 5px #009cff;
 }
 
-.cke_hc div.cke_dialog_ui_input_text,
-.cke_hc div.cke_dialog_ui_input_password,
-.cke_hc div.cke_dialog_ui_input_textarea
-{
-	background-color: white;
-	border: 1px solid #a0a0a0;
-	padding: 1px 0px;
-}
-
 /*
 Button
 --------
@@ -579,7 +581,9 @@ a.cke_dialog_ui_button:hover
 	filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#fff2f2f2', endColorstr='#ffcccccc');
 }
 
-.cke_hc a.cke_dialog_ui_button:hover
+.cke_hc a.cke_dialog_ui_button:hover,
+.cke_hc a.cke_dialog_ui_button:focus,
+.cke_hc a.cke_dialog_ui_button:active
 {
 	border: 3px solid;
 	padding: 1px 10px;
@@ -654,7 +658,8 @@ span.cke_dialog_ui_button
 /*
 Styles for other dialog element types.
 */
-.cke_dialog_ui_input_select
+
+select.cke_dialog_ui_input_select
 {
 	height: 24px;
 	line-height: 24px;
@@ -664,6 +669,8 @@ Styles for other dialog element types.
 	border-top-color: #aeb3b9;
 	padding: 4px 6px;
 
+	outline: none;
+
 	-moz-border-radius: 3px;
 	-webkit-border-radius: 3px;
 	border-radius: 3px;
@@ -679,6 +686,13 @@ Styles for other dialog element types.
 	height: 25px;
 }
 
+.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;
+}
+
 /*
  * Some utility CSS classes for dialog authors.
  */
@@ -874,7 +888,6 @@ a.cke_smile img
 /* Compensate focus outline for some input elements. (#6200) */
 .cke_dialog_ui_checkbox_input:focus,
 .cke_dialog_ui_radio_input:focus,
-.cke_dialog_ui_input_select:focus,
 .cke_btn_over
 {
 	outline: 1px dotted #696969;

diff --git a/skins/moono/elementspath.css b/skins/moono/elementspath.css
@@ -74,3 +74,11 @@ a.cke_path_item:active
 	-webkit-box-shadow: 0 0 4px rgba(0,0,0,.5) inset, 0 1px 0 rgba(255,255,255,.5);
 	box-shadow: 0 0 4px rgba(0,0,0,.5) inset, 0 1px 0 rgba(255,255,255,.5);
 }
+
+.cke_hc a.cke_path_item:hover,
+.cke_hc a.cke_path_item:focus,
+.cke_hc a.cke_path_item:active
+{
+	border: 2px solid;
+	padding: 1px 2px;
+}
diff --git a/skins/moono/menu.css b/skins/moono/menu.css
@@ -69,11 +69,17 @@ Special outer level classes used in this file:
 	display: block;
 }
 
+.cke_hc .cke_menubutton
+{
+	padding: 2px;
+}
+
 .cke_hc .cke_menubutton:hover,
 .cke_hc .cke_menubutton:focus,
 .cke_hc .cke_menubutton:active
 {
 	border: 2px solid;
+	padding: 0;
 }
 
 .cke_menubutton_inner {

diff --git a/skins/moono/panel.css b/skins/moono/panel.css
@@ -194,6 +194,19 @@ is its visual representation:
     box-shadow: 0 0 2px rgba(0,0,0,.1) inset;
 }
 
+.cke_hc .cke_panel_listItem a
+{
+	border-style: none;
+}
+
+.cke_hc .cke_panel_listItem a:hover,
+.cke_hc .cke_panel_listItem a:focus,
+.cke_hc .cke_panel_listItem a:active
+{
+	border: 2px solid;
+	padding: 1px 2px;
+}
+
 /* The title of the entire panel which is visible on top of the list. */
 .cke_panel_grouptitle
 {

diff --git a/skins/moono/richcombo.css b/skins/moono/richcombo.css
@@ -138,6 +138,20 @@ The visual representation of a rich combo widget looks as follows:
 	margin-right: 0;
 }
 
+.cke_hc a.cke_combo_button
+{
+	padding: 3px;
+}
+
+.cke_hc .cke_combo_on a.cke_combo_button,
+.cke_hc .cke_combo_off a.cke_combo_button:hover,
+.cke_hc .cke_combo_off a.cke_combo_button:focus,
+.cke_hc .cke_combo_off a.cke_combo_button: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 */
@@ -163,7 +177,7 @@ The visual representation of a rich combo widget looks as follows:
 
 .cke_hc .cke_combo_text
 {
-	line-height: 22px;
+	line-height: 18px;
 	font-size: 12px;
 }
 
@@ -182,8 +196,7 @@ The visual representation of a rich combo widget looks as follows:
 
 .cke_hc .cke_combo_open
 {
-	height: 17px;
-	margin-top: 3px;
+	height: 12px;
 }
 
 /* The arrow which is displayed inside of the .cke_combo_open handler. */
@@ -214,4 +227,4 @@ The visual representation of a rich combo widget looks as follows:
 .cke_combo_disabled .cke_combo_open
 {
 	opacity: 0.3;
-}
+}
diff --git a/skins/moono/toolbar.css b/skins/moono/toolbar.css
@@ -179,7 +179,10 @@ a.cke_button
 	filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ffaaaaaa', endColorstr='#ffcacaca');
 }
 
-.cke_hc .cke_button_on
+.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
 {
 	border-width: 3px;
 
@@ -196,6 +199,11 @@ a.cke_button
 	opacity: 0.3;
 }
 
+.cke_hc .cke_button_disabled
+{
+	opacity: 0.5;
+}
+
 a.cke_button_on:hover,
 a.cke_button_on:focus,
 a.cke_button_on:active
@@ -433,4 +441,4 @@ a.cke_button_off:active
 	border: 0;
 	margin-top: 0;
 	margin-right: 2px;
-}
+}