Skip to content

Commit

Permalink
Fix background on split buttons, remove redundant !important, remove …
Browse files Browse the repository at this point in the history 
…spacers, a little css cleanup, see #18141

git-svn-id: http://core.svn.wordpress.org/trunk@22025 1a063a9b-81f0-0310-95a4-ce76da25c4cd
  • Loading branch information
@azaozz
azaozz committed Sep 27, 2012
1 parent baaf5c4 commit 3c6ef16
Show file tree
Hide file tree
Showing 4 changed files with 66 additions and 137 deletions.
100 changes: 42 additions & 58 deletions wp-admin/css/colors-classic.css
View file
Expand Up @@ -1021,20 +1021,20 @@ table.widefat .spam a:hover,

/* TinyMCE */

.wp-editor-wrap .wp-switch-editor {
.wp-admin .wp-editor-wrap .wp-switch-editor {
background-color: #d3e9f2;
border-color: #d1e5ee #d1e5ee #d3e9f2;
color: #888;
}

.wp-editor-wrap.tmce-active .switch-tmce,
.wp-editor-wrap.html-active .switch-html {
background: #f7fcfe !important;
border-color: #d1e5ee #d1e5ee #f7fcfe !important;
.wp-admin .wp-editor-wrap.tmce-active .switch-tmce,
.wp-admin .wp-editor-wrap.html-active .switch-html {
background: #f7fcfe;
border-color: #d1e5ee #d1e5ee #f7fcfe;
}

.wp-editor-wrap .quicktags-toolbar,
.wp-editor-wrap .wp_themeSkin tr.mceFirst td.mceToolbar {
.wp-admin .wp-editor-wrap .quicktags-toolbar,
.wp-admin .wp-editor-wrap .wp_themeSkin tr.mceFirst td.mceToolbar {
border-color: #d0dfe9;
background-color: #f5fafd;
background-image: -webkit-gradient(linear, left bottom, left top, from(#eff8ff), to(#f7fcfe));
Expand All @@ -1044,70 +1044,54 @@ table.widefat .spam a:hover,
background-image: linear-gradient(to top, #eff8ff, #f7fcfe);
}

.wp_themeSkin table.mceListBox {
.wp-admin .wp_themeSkin table.mceListBox {
border-color: #d1e5ee;
}

.wp_themeSkin table.mceListBoxEnabled:hover,
.wp_themeSkin table.mceListBoxEnabled:active,
.wp_themeSkin table.mceListBoxHover,
.wp_themeSkin table.mceListBoxHover:active,
.wp_themeSkin table.mceListBoxSelected {
.wp-admin .wp_themeSkin table.mceListBoxEnabled:hover,
.wp-admin .wp_themeSkin table.mceListBoxEnabled:active,
.wp-admin .wp_themeSkin table.mceListBoxHover,
.wp-admin .wp_themeSkin table.mceListBoxHover:active,
.wp-admin .wp_themeSkin table.mceListBoxSelected {
border-color: #b8cfdf;
}

.wp_themeSkin a.mceButtonEnabled:hover {
border-color: #c3d2dc !important;
.wp-admin .wp_themeSkin a.mceButtonEnabled:hover,
.wp-admin .wp_themeSkin table.mceSplitButton:hover {
border-color: #c3d2dc;
background: #f4f9fc;
background-image: -webkit-gradient(linear, left bottom, left top, from(#f4f9fc), to(#fff)) !important;
background-image: -webkit-linear-gradient(bottom, #f4f9fc, #fff) !important;
background-image: -moz-linear-gradient(bottom, #f4f9fc, #fff) !important;
background-image: -o-linear-gradient(bottom, #f4f9fc, #fff) !important;
background-image: linear-gradient(to top, #f4f9fc, #fff) !important;
}

.wp_themeSkin a.mceButton:active,
.wp_themeSkin a.mceButtonEnabled:active,
.wp_themeSkin a.mceButtonSelected:active,
.wp_themeSkin a.mceButtonActive,
.wp_themeSkin a.mceButtonActive:active,
.wp_themeSkin a.mceButtonActive:hover {
border-color: #8f9da9 #c3d2dc #c3d2dc #8f9da9 !important;
background-image: -webkit-gradient(linear, left bottom, left top, from(#f4f9fc), to(#fff));
background-image: -webkit-linear-gradient(bottom, #f4f9fc, #fff);
background-image: -moz-linear-gradient(bottom, #f4f9fc, #fff);
background-image: -o-linear-gradient(bottom, #f4f9fc, #fff);
background-image: linear-gradient(to top, #f4f9fc, #fff);
}

.wp-admin .wp_themeSkin a.mceButton:active,
.wp-admin .wp_themeSkin a.mceButtonEnabled:active,
.wp-admin .wp_themeSkin a.mceButtonSelected:active,
.wp-admin .wp_themeSkin a.mceButtonActive,
.wp-admin .wp_themeSkin a.mceButtonActive:active,
.wp-admin .wp_themeSkin a.mceButtonActive:hover,
.wp-admin .wp_themeSkin .mceSplitButtonSelected table,
.wp-admin .wp_themeSkin .mceSplitButtonSelected table:hover {
border-color: #8f9da9 #c3d2dc #c3d2dc #8f9da9;
background: #f4f9fc;
background-image: -webkit-gradient(linear, left bottom, left top, from(#fff), to(#f4f9fc)) !important;
background-image: -webkit-linear-gradient(bottom, #fff, #f4f9fc) !important;
background-image: -moz-linear-gradient(bottom, #fff, #f4f9fc) !important;
background-image: -o-linear-gradient(bottom, #fff, #f4f9fc) !important;
background-image: linear-gradient(to top, #fff, #f4f9fc) !important;
}

.wp_themeSkin .mceSplitButton:hover a.mceOpen,
.wp_themeSkin .mceSplitButtonSelected a.mceOpen,
.wp_themeSkin .mceSplitButtonSelected a.mceAction,
.wp_themeSkin table.mceSplitButtonEnabled:hover a.mceAction,
.wp_themeSkin .mceSplitButton a.mceAction:hover {
border-color: #c3d2dc !important;
background-image: -webkit-gradient(linear, left bottom, left top, from(#fff), to(#f4f9fc));
background-image: -webkit-linear-gradient(bottom, #fff, #f4f9fc);
background-image: -moz-linear-gradient(bottom, #fff, #f4f9fc);
background-image: -o-linear-gradient(bottom, #fff, #f4f9fc);
background-image: linear-gradient(to top, #fff, #f4f9fc);
}

.wp_themeSkin table.mceSplitButton:hover td {
border-color: #f4f9fc;
background: #eee;
background-image: -webkit-gradient(linear, left bottom, left top, from(#f4f9fc), to(#fff)) !important;
background-image: -webkit-linear-gradient(bottom, #f4f9fc, #fff) !important;
background-image: -moz-linear-gradient(bottom, #f4f9fc, #fff) !important;
background-image: -o-linear-gradient(bottom, #f4f9fc, #fff) !important;
background-image: linear-gradient(to top, #f4f9fc, #fff) !important;
.wp-admin .wp_themeSkin .mceSplitButtonSelected table a.mceOpen,
.wp-admin .wp_themeSkin .mceSplitButtonSelected table a.mceAction {
border-color: #8f9da9 #c3d2dc #c3d2dc #8f9da9;
}

.wp_themeSkin .mceSplitButtonSelected td {
background: #f4f9fc;
background-image: -webkit-gradient(linear, left bottom, left top, from(#fff), to(#f4f9fc)) !important;
background-image: -webkit-linear-gradient(bottom, #fff, #f4f9fc) !important;
background-image: -moz-linear-gradient(bottom, #fff, #f4f9fc) !important;
background-image: -o-linear-gradient(bottom, #fff, #f4f9fc) !important;
background-image: linear-gradient(to top, #fff, #f4f9fc) !important;
.wp-admin .wp_themeSkin .mceSplitButton:hover a {
border-color: #c3d2dc;
}

/* end TinyMCE */

.editwidget .widget-inside {
Expand Down
7 changes: 2 additions & 5 deletions wp-admin/css/wp-admin.css
View file
Expand Up @@ -719,12 +719,9 @@ h2 .nav-tab,
}

.pre {
/* http://www.longren.org/2006/09/27/wrapping-text-inside-pre-tags/ */
/* https://developer.mozilla.org/en-US/docs/CSS/white-space */
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
word-wrap: break-word; /* IE 5.5 - 7 */
}

.howto {
Expand Down
6 changes: 3 additions & 3 deletions wp-includes/class-wp-editor.php
View file
Expand Up @@ -383,11 +383,11 @@ public static function editor_settings($editor_id, $set) {
}

if ( $set['teeny'] ) {
$mce_buttons = apply_filters( 'teeny_mce_buttons', array('bold', 'italic', 'underline', 'blockquote', 'separator', 'strikethrough', 'bullist', 'numlist', 'justifyleft', 'justifycenter', 'justifyright', 'undo', 'redo', 'link', 'unlink', 'fullscreen'), $editor_id );
$mce_buttons = apply_filters( 'teeny_mce_buttons', array('bold', 'italic', 'underline', 'blockquote', 'strikethrough', 'bullist', 'numlist', 'justifyleft', 'justifycenter', 'justifyright', 'undo', 'redo', 'link', 'unlink', 'fullscreen'), $editor_id );
$mce_buttons_2 = $mce_buttons_3 = $mce_buttons_4 = array();
} else {
$mce_buttons = apply_filters('mce_buttons', array('bold', 'italic', 'strikethrough', '|', 'bullist', 'numlist', 'blockquote', '|', 'justifyleft', 'justifycenter', 'justifyright', '|', 'link', 'unlink', 'wp_more', '|', 'spellchecker', 'fullscreen', 'wp_adv' ), $editor_id);
$mce_buttons_2 = apply_filters('mce_buttons_2', array( 'formatselect', 'underline', 'justifyfull', 'forecolor', '|', 'pastetext', 'pasteword', 'removeformat', '|', 'charmap', '|', 'outdent', 'indent', '|', 'undo', 'redo', 'wp_help' ), $editor_id);
$mce_buttons = apply_filters('mce_buttons', array('bold', 'italic', 'strikethrough', 'bullist', 'numlist', 'blockquote', 'justifyleft', 'justifycenter', 'justifyright', 'link', 'unlink', 'wp_more', 'spellchecker', 'fullscreen', 'wp_adv' ), $editor_id);
$mce_buttons_2 = apply_filters('mce_buttons_2', array( 'formatselect', 'underline', 'justifyfull', 'forecolor', 'pastetext', 'pasteword', 'removeformat', 'charmap', 'outdent', 'indent', 'undo', 'redo', 'wp_help' ), $editor_id);
$mce_buttons_3 = apply_filters('mce_buttons_3', array(), $editor_id);
$mce_buttons_4 = apply_filters('mce_buttons_4', array(), $editor_id);
}
Expand Down
90 changes: 19 additions & 71 deletions wp-includes/css/editor.css
View file
Expand Up @@ -200,12 +200,7 @@

/* Separator */
.wp_themeSkin .mceSeparator {
height: 24px;
width: 1px;
display: block;
background: transparent;
overflow: hidden;
margin: 0 2px;
display: none;
}

/* ListBox */
Expand Down Expand Up @@ -316,7 +311,7 @@
height: 20px;
width: 20px;
padding: 1px 2px;
border-right: 0 none !important;
border-right: 0 none;
}

.wp_themeSkin .mceSplitButton span.mceAction {
Expand All @@ -334,17 +329,6 @@
padding: 1px 0;
}

.wp_themeSkin .mceSplitButtonActive a.mceOpen,
.wp_themeSkin .mceSplitButtonSelected a.mceOpen,
.wp_themeSkin .mceSplitButton a.mceOpen:hover {
width: 12px;
border-left: 1px solid transparent !important;
background-position: 2px 2px !important;
position: relative;
left: -1px;
margin-right: -1px;
}

.wp_themeSkin .mceSplitButton span.mceOpen {
display: none;
}
Expand Down Expand Up @@ -756,7 +740,7 @@

.wp_themeSkin .mceSplitButton .mce_forecolor span.mce_forecolor {background-position:-320px -20px}
.wp_themeSkin .mceSplitButtonEnabled:hover span.mce_forecolor,
.wp_themeSkin .mceSplitButtonActive span.mce_forecolor {background-position:-320px 0}
.wp_themeSkin .mceSplitButtonSelected span.mce_forecolor {background-position:-320px 0}

.wp_themeSkin .mce_forecolorpicker {background-position:-320px -20px}

Expand Down Expand Up @@ -785,7 +769,7 @@
.wp_themeSkin .mceButtonEnabled:hover span.mce_spellchecker,
.wp_themeSkin .mceSplitButtonEnabled:hover span.mce_spellchecker,
.wp_themeSkin .mceButtonActive span.mce_spellchecker,
.wp_themeSkin .mceSplitButtonActive span.mce_spellchecker {background-position:-220px 0}
.wp_themeSkin .mceSplitButtonSelected span.mce_spellchecker {background-position:-220px 0}

.wp_themeSkin span.mce_wp_help {background-position:-520px -20px}
.wp_themeSkin .mceButtonEnabled:hover span.mce_wp_help,
Expand Down Expand Up @@ -905,7 +889,8 @@
border-color: transparent;
}

.wp_themeSkin a.mceButtonEnabled:hover {
.wp_themeSkin a.mceButtonEnabled:hover,
.wp_themeSkin table.mceSplitButton:hover {
border-color: #bbb;
background: #eee;
background-image: -webkit-gradient(linear, left bottom, left top, from(#e5e5e5), to(#fff));
Expand All @@ -920,7 +905,9 @@
.wp_themeSkin a.mceButtonSelected:active,
.wp_themeSkin a.mceButtonActive,
.wp_themeSkin a.mceButtonActive:active,
.wp_themeSkin a.mceButtonActive:hover {
.wp_themeSkin a.mceButtonActive:hover,
.wp_themeSkin .mceSplitButtonSelected table,
.wp_themeSkin .mceSplitButtonSelected table:hover {
outline: none;
border-color: #999 #ccc #ccc #999;
background: #eee;
Expand All @@ -931,12 +918,17 @@
background-image: linear-gradient(to top, #f6f6f6, #e3e3e3);
}

.wp_themeSkin .mceSplitButtonSelected table a.mceOpen,
.wp_themeSkin .mceSplitButtonSelected table a.mceAction {
border-color: #999 #ccc #ccc #999;
}

.wp_themeSkin .mceButtonDisabled {
border-color: transparent !important;
border-color: transparent;
}

.wp_themeSkin .mceListBox .mceOpen {
border-left: 0 !important;
border-left: 0;
}

.wp_themeSkin .mceListBoxEnabled:hover,
Expand All @@ -951,19 +943,15 @@

/* SplitButton */
.wp_themeSkin .mceSplitButton .mceLast span.mceOpen .mceIconOnly {
display: block !important;
display: block;
}

.wp_themeSkin .mceSplitButton a.mceAction,
.wp_themeSkin .mceSplitButton a.mceOpen {
border-color: transparent;
}

.wp_themeSkin .mceSplitButton:hover a.mceOpen,
.wp_themeSkin .mceSplitButtonSelected a.mceOpen,
.wp_themeSkin .mceSplitButtonSelected a.mceAction,
.wp_themeSkin table.mceSplitButtonEnabled:hover a.mceAction,
.wp_themeSkin .mceSplitButton a.mceAction:hover {
.wp_themeSkin .mceSplitButton:hover a {
border-color: #bbb;
}

Expand All @@ -974,50 +962,10 @@
background-image: url("../images/down_arrow.gif");
background-position: 1px 2px;
background-repeat: no-repeat;
}

.wp_themeSkin .mceSplitButtonSelected td {
background-color: #ddd;
background-image: -webkit-gradient(linear, left bottom, left top, from(#fff), to(#ccc));
background-image: -webkit-linear-gradient(bottom, #fff, #ccc);
background-image: -moz-linear-gradient(bottom, #fff, #ccc);
background-image: -o-linear-gradient(bottom, #fff, #ccc);
background-image: linear-gradient(to top, #fff, #ccc);
}

.wp_themeSkin table.mceSplitButton:hover td {
border-color: #bbb;
background-color: #eee;
background-image: -webkit-gradient(linear, left bottom, left top, from(#ccc), to(#fff));
background-image: -webkit-linear-gradient(bottom, #ccc, #fff);
background-image: -moz-linear-gradient(bottom, #ccc, #fff);
background-image: -o-linear-gradient(bottom, #ccc, #fff);
background-image: linear-gradient(to top, #ccc, #fff);
}

.wp_themeSkin table.mceSplitButton:active td.mceFirst,
.wp_themeSkin table.mceSplitButton td.mceLast:active {
border-color: #bbb;
background-color: #ddd;
background-image: -webkit-gradient(linear, left bottom, left top, from(#fff), to(#ccc));
background-image: -webkit-linear-gradient(bottom, #fff, #ccc);
background-image: -moz-linear-gradient(bottom, #fff, #ccc);
background-image: -o-linear-gradient(bottom, #fff, #ccc);
background-image: linear-gradient(to top, #fff, #ccc);
}

.wp_themeSkin .mceSplitButtonActive td a.mceAction,
.wp_themeSkin .mceSplitButtonActive td a.mceOpen {
border-color: #bbb;
border-left: 0;
}

.wp_themeSkin .mceSplitButtonActive td {
background-color: #ddd;
background-image: -webkit-gradient(linear, left bottom, left top, from(#fff), to(#ccc));
background-image: -webkit-linear-gradient(bottom, #fff, #ccc);
background-image: -moz-linear-gradient(bottom, #fff, #ccc);
background-image: -o-linear-gradient(bottom, #fff, #ccc);
background-image: linear-gradient(to top, #fff, #ccc);
-webkit-border-radius: 3px;
border-radius: 3px;
}
Expand Down

0 comments on commit 3c6ef16

Please sign in to comment.