Changeset 27193

Timestamp:

02/19/2014 03:50:09 AM (11 years ago)

Author:

azaozz

Message:

TinyMCE: revert style for the blocks drop-down in the toolbar, limit the styles imported for the same drop-down, make the menu highlight color grey. Part props avryl, see #26952

Location:

trunk/src/wp-includes

Files:

• class-wp-editor.php (modified) (1 diff)
• css/editor.css (modified) (11 diffs)
• images/wpicons-2x.png (modified) (previous)
• images/wpicons.png (modified) (previous)

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

@@ -325 +325 @@
                     'paste_remove_styles' => true,
 
-                    // limit the preview styles in the menu/toolbar
-            //      'preview_styles' => 'font-family font-weight font-style text-decoration text-transform color background-color border',
+                    // Limit the preview styles in the menu/toolbar
+                    'preview_styles' => 'font-family font-size font-weight font-style text-decoration text-transform',
 
                     'wpeditimage_disable_captions' => $no_captions,

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

@@ -18 +18 @@
 
 .mce-window {
+    -webkit-border-radius: 0;
     border-radius: 0;
+    -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.7);
     box-shadow: 0 5px 15px rgba(0,0,0,0.7);
     z-index: 160000 !important; /* Overwrite inline style added by TinyMCE. */
@@ -56 +58 @@
     font: normal 20px/2 'dashicons';
     text-align: center;
-    color: #888;
+    color: #666;
     width: 40px;
     height: 40px;
@@ -63 +65 @@
 
 .mce-window .mce-window-head .mce-close:hover:before {
-    color: #555;
+    color: #2ea2cc;
 }
 
 .mce-window .mce-window-head .mce-dragh {
+    width: -webkit-calc( 100% - 40px );
     width: calc( 100% - 40px );
 }
@@ -72 +75 @@
 .mce-textbox {
     border: 1px solid #ddd;
+    -webkit-border-radius: 0;
     border-radius: 0;
     -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.07);
@@ -90 +94 @@
 .mce-floatpanel.mce-popover {
     border-color: rgba(0,0,0,0.15);
+    -webkit-border-radius: 0;
     border-radius: 0;
+    -webkit-box-shadow: 0 3px 5px rgba( 0, 0, 0, 0.2 );
     box-shadow: 0 3px 5px rgba( 0, 0, 0, 0.2 );
 }
@@ -154 +160 @@
     -webkit-box-shadow: none;
     box-shadow: none;
+    text-shadow: none;
 }
 
@@ -215 +222 @@
 }
 
+/* mce listbox */
+.mce-toolbar .mce-btn-group .mce-btn.mce-listbox {
+    -webkit-border-radius: 0;
+    border-radius: 0;
+    direction: ltr;
+    background: #fff;
+    border: 1px solid #ddd;
+    -webkit-box-shadow: inset 0 1px 1px -1px rgba(0, 0, 0, .2);
+    box-shadow: inset 0 1px 1px -1px rgba(0, 0, 0, .2);
+}
+
+.mce-toolbar .mce-btn-group .mce-btn.mce-listbox:hover {
+    background-image: none;
+    border-color: #bbb;
+}
+
+
+.mce-toolbar .mce-btn .mce-caret {
+    border: none;
+    margin: 0 0 0 -5px;
+    width: 16px;
+}
+
+.mce-toolbar .mce-listbox .mce-caret {
+    margin-top: 0;
+    padding: 2px 0 0;
+    right: 0;
+    top: 0;
+    width: 16px;
+}
+
+.mce-toolbar .mce-listbox .mce-caret:before {
+    margin-left: -6px;
+}
+
+.mce-toolbar .mce-splitbtn:hover .mce-open {
+    border-right-color: transparent;
+}
+
+.mce-toolbar .mce-splitbtn .mce-open.mce-active{
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+
+.mce-menu .mce-menu-item-normal.mce-active {
+    background-color: #e5e5e5;
+    -webkit-filter: none;
+    filter: none;
+}
+
+.mce-menu .mce-menu-item:hover,
+.mce-menu .mce-menu-item.mce-selected,
+.mce-menu .mce-menu-item:focus {
+    color: #000;
+    background-color: #bbb;
+    background-image: none;
+    -webkit-filter: none;
+    filter: none;
+}
+
+.mce-menu .mce-menu-item:hover .mce-ico,
+.mce-menu .mce-menu-item.mce-selected .mce-ico,
+.mce-menu .mce-menu-item:focus .mce-ico,
+.mce-menu .mce-menu-item:hover .mce-text,
+.mce-menu .mce-menu-item.mce-active:hover .mce-text,
+.mce-menu .mce-menu-item.mce-selected .mce-text {
+    color: #000;
+}
+
+/* Menubar */
 .mce-menubar {
     border-color: #e5e5e5;
@@ -228 +305 @@
 }
 
+.mce-menubtn span {
+    margin-right: 0;
+    padding-left: 3px;
+}
+
 /* Buttons in modals */
+.mce-primary button,
+.mce-primary button i {
+    text-align: center;
+    color: #fff;
+    text-shadow: none;
+}
+
 .mce-window .mce-btn {
     color: #555;
@@ -336 +425 @@
 
 /* TinyMCE tooltips */
-
 .mce-tooltip {
     margin-top: 2px;
@@ -342 +430 @@
 
 .mce-tooltip-inner {
+    -webkit-box-shadow: 0 3px 5px rgba( 0, 0, 0, 0.2 );
     box-shadow: 0 3px 5px rgba( 0, 0, 0, 0.2 );
     color: #fff;
@@ -541 +630 @@
 }
 
-.mce-toolbar .mce-btn .mce-caret {
-    border: none;
-    margin: 0 0 0 -5px;
-    width: 16px;
-}
-
-.mce-menubtn span {
-    margin-right: 0;
-    padding-left: 3px;
-}
-
-.mce-toolbar .mce-listbox .mce-caret {
-    margin-top: 0;
-    padding: 2px 3px;
-    right: 0;
-    top: 0;
-    width: 10px;
-}
-
-.mce-toolbar .mce-listbox:hover .mce-caret,
-.mce-toolbar .mce-listbox.mce-active .mce-caret {
-    border-left: 1px solid #bdbdbd;
-}
-
-.mce-toolbar .mce-listbox .mce-caret:before {
-    margin-left: -6px;
-}
-
-.mce-toolbar .mce-splitbtn:hover .mce-open {
-    border-right-color: transparent;
-}
-
-.mce-toolbar .mce-splitbtn .mce-open.mce-active{
-    -webkit-box-shadow: none;
-    box-shadow: none;
-}
-
 /* Editors */
 .wp-editor-wrap {