Changeset 27978

Timestamp:

04/07/2014 01:09:38 AM (10 years ago)

Author:

azaozz

Message:

TinyMCE:

• Tighten up button styles, add :hover for .mce-active buttons.
• Pad only the first toolbar row and remove the padding in both toolbars if the editor doesn't have a DFW mode.

Part props avryl, see #27279

Location:

trunk/src/wp-includes

Files:

• class-wp-editor.php (modified) (1 diff)
• css/editor.css (modified) (8 diffs)

trunk/src/wp-includes/class-wp-editor.php

@@ -169 +169 @@
         }
 
-        echo '<div id="wp-' . $editor_id . '-wrap" class="wp-core-ui wp-editor-wrap ' . $switch_class . '">';
+        $wrap_class = 'wp-core-ui wp-editor-wrap ' . $switch_class;
+
+        if ( $set['dfw'] ) {
+            $wrap_class .= ' has-dfw';
+        }
+
+        echo '<div id="wp-' . $editor_id . '-wrap" class="' . $wrap_class . '">';
 
         if ( self::$editor_buttons_css ) {

trunk/src/wp-includes/css/editor.css

@@ -145 +145 @@
     border-bottom: 1px solid #dedede;
     background: #f5f5f5;
-    padding: 3px 35px 3px 3px;
+    padding: 3px;
     position: relative;
+}
+
+.has-dfw div.mce-toolbar-grp .mce-toolbar.mce-first {
+    padding-right: 32px;
 }
 
@@ -178 +182 @@
     margin: 2px;
     background-image: none;
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
+    -webkit-border-radius: 2px;
+    border-radius: 2px;
     -webkit-filter: none;
     filter: none;
@@ -201 +205 @@
 .mce-toolbar .mce-btn-group .mce-btn:active,
 #wp-fullscreen-buttons .mce-btn:active {
-    background: #eee;
+    background: #ebebeb;
     border-color: #999;
-    color: #333;
-    -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
-    box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
+    -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.3 );
+    box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.3 );
+}
+
+.mce-toolbar .mce-btn-group .mce-btn.mce-active:hover {
+    border-color: #555;
+}
+
+.mce-toolbar .mce-btn-group .mce-btn.mce-active:hover i.mce-ico {
+    color: #555;
 }
 
@@ -244 +255 @@
 
 .mce-toolbar .mce-colorbutton .mce-preview {
-    margin-left: -16px;
+    margin-left: -17px;
     padding: 0;
     width: 18px;
@@ -267 +278 @@
 .mce-panel .mce-btn i.mce-caret {
     border-top: 6px solid #777;
+    margin-left: 2px;
+    margin-right: 2px;
+}
+
+.mce-listbox i.mce-caret {
+    right: 6px;
+}
+
+.mce-panel .mce-btn button.mce-open i.mce-caret,
+.mce-panel .mce-btn.mce-listbox i.mce-caret {
+    margin-left: 0;
+    margin-right: 0;
 }
 
@@ -442 +465 @@
     border-color: #1b607f;
     text-shadow: 0 -1px 0 rgba(0,0,0,0.1);
+}
+
+.mce-menubtn.mce-fixed-width button span {
+    width: auto;
+    max-width: 80px;
+    padding-right: 16px;
 }
 
@@ -739 +768 @@
 }
 
-.quicktags-toolbar {
-    border-bottom: 1px solid #dedede;
-    background: #f5f5f5;
-}
-
 .wp-editor-tabs {
     float: right;
@@ -845 +869 @@
 /* Quicktags */
 .quicktags-toolbar {
-    border-bottom-style: solid;
-    border-bottom-width: 1px;
-    padding: 3px 35px 3px 3px;
+    padding: 3px;
     position: relative;
+    border-bottom: 1px solid #dedede;
+    background: #f5f5f5;
+}
+
+.has-dfw .quicktags-toolbar {
+    padding-right: 35px;
 }