Added basic HC support to Moono.

ucefkh · Oct 23, 2012 · 34519f4 · 34519f4
1 parent b3b1e98
commit 34519f4
Show file tree

Hide file tree

Showing 6 changed files with 149 additions and 1 deletion.
diff --git a/skins/moono/dialog.css b/skins/moono/dialog.css
@@ -256,6 +256,13 @@ a.cke_dialog_tab_selected
 	filter: none;
 }
 
+.cke_hc a.cke_dialog_tab:hover,
+.cke_hc a.cke_dialog_tab_selected
+{
+	border: 3px solid;
+	padding: 2px 6px;
+}
+
 /* The .cke_single_page class is appended to the dialog outer element in case
    of dialogs that has no tabs. */
 .cke_single_page .cke_dialog_tabs
@@ -291,6 +298,15 @@ a.cke_dialog_tab_selected
 	display: none;
 }
 
+.cke_hc .cke_dialog_close_button span
+{
+	display: inline;
+	cursor: pointer;
+	font-weight: bold;
+	position: relative;
+	top: 3px;
+}
+
 .cke_dialog_close_button:hover
 {
 }
@@ -534,6 +550,15 @@ 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
 --------
@@ -599,6 +624,12 @@ 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
+{
+	border: 3px solid;
+	padding: 1px 10px;
+}
+
 a.cke_dialog_ui_button[style*="width"]
 {
 	display: block;

diff --git a/skins/moono/dialog_ie.css b/skins/moono/dialog_ie.css
@@ -36,3 +36,16 @@ This file contains styles to used by all versions of Internet Explorer only.
 {
 	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);
+}
diff --git a/skins/moono/editor_ie.css b/skins/moono/editor_ie.css
@@ -59,3 +59,21 @@ a.cke_combo_button:hover .cke_combo_inlinelabel
 	right: 1px;
 	padding-left: 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);
+}
diff --git a/skins/moono/mainui.css b/skins/moono/mainui.css
@@ -145,6 +145,7 @@ 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
@@ -203,4 +204,4 @@ Special outer level classes used in this file:
 	overflow: auto;
 	padding: 0 8px;
 	outline-style: none;
-}
+}
diff --git a/skins/moono/richcombo.css b/skins/moono/richcombo.css
@@ -36,6 +36,11 @@ The visual representation of a rich combo widget looks as follows:
 	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
@@ -156,6 +161,12 @@ a.cke_combo_button:active .cke_combo_text,
 	padding-right: 10px;
 }
 
+.cke_hc .cke_combo_text
+{
+	line-height: 22px;
+	font-size: 12px;
+}
+
 /* The label of the combo whose value hasn't been changed (it's default).
    It displays the name of the property the combo is responsible for. */
 .cke_combo_inlinelabel
@@ -175,6 +186,12 @@ a.cke_combo_button:active .cke_combo_text,
 	width: 5px;
 }
 
+.cke_hc .cke_combo_open
+{
+	height: 17px;
+	margin-top: 3px;
+}
+
 
 /* The arrow which is displayed inside of the .cke_combo_open handler. */
 .cke_combo_arrow
@@ -189,4 +206,12 @@ a.cke_combo_button:active .cke_combo_text,
 	border-left: 3px solid transparent;
 	border-right: 3px solid transparent;
 	border-top: 3px solid #474747;
+}
+
+.cke_hc .cke_combo_arrow
+{
+	font-size: 10px;
+	width: auto;
+	border: 0;
+	margin-top: 3px;
 }
diff --git a/skins/moono/toolbar.css b/skins/moono/toolbar.css
@@ -86,6 +86,13 @@ Special outer level classes used in this file:
 	filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ffffffff', endColorstr='#ffe4e4e4');
 }
 
+.cke_hc .cke_toolgroup
+{
+	border: 0;
+	margin-right: 10px;
+	margin-bottom: 10px;
+}
+
 .cke_toolgroup *:first-child
 {
 	-moz-border-top-left-radius: 2px;
@@ -144,6 +151,15 @@ a.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. */
@@ -163,6 +179,14 @@ a.cke_button
 	filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ffaaaaaa', endColorstr='#ffcacaca');
 }
 
+.cke_hc .cke_button_on
+{
+	border-width: 3px;
+
+	/* Compensate the border change */
+	padding: 1px 3px;
+}
+
 .cke_button_on .cke_button_label
 {
 }
@@ -233,6 +257,11 @@ a.cke_button_off:active
 	float: right;
 }
 
+.cke_hc .cke_button_icon
+{
+	display: none;
+}
+
 a.cke_button_off:hover .cke_button_icon
 {
     /* http://caniuse.com/css-filters */
@@ -262,6 +291,13 @@ a.cke_button_off:hover .cke_button_icon
 	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
@@ -284,6 +320,14 @@ a.cke_button_off:hover .cke_button_icon
 	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
@@ -309,6 +353,13 @@ a.cke_button_off:hover .cke_button_icon
 	box-shadow: -1px 0 1px rgba(255,255,255,.1);
 }
 
+.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
@@ -398,3 +449,12 @@ a.cke_button_off:hover .cke_button_icon
 	border-bottom-color: transparent;
 	border-top-color: #474747;
 }
+
+.cke_hc .cke_toolbox_collapser .cke_arrow
+{
+	font-size: 8px;
+	width: auto;
+	border: 0;
+	margin-top: 0;
+	margin-right: 2px;
+}