Changeset 27765

Timestamp:

03/27/2014 12:07:05 AM (11 years ago)

Author:

helen

Message:

Better, more consistent styling for plugin details Thickbox and TinyMCE help.

props avryl. fixes #26952.

Location:

trunk/src

Files:

• wp-admin/css/common.css (modified) (9 diffs)
• wp-includes/css/editor.css (modified) (1 diff)
• wp-includes/js/tinymce/plugins/wordpress/plugin.js (modified) (1 diff)
• wp-includes/js/tinymce/wp-mce-help.php (modified) (3 diffs)

trunk/src/wp-admin/css/common.css

@@ -1807 +1807 @@
 
 #plugin-information-title {
-    padding: 0 36px 0 16px;
-    font-size: 18px;
+    padding: 0 76px 0 20px;
+    font-size: 22px;
     font-weight: 600;
-    line-height: 36px;
+    line-height: 56px;
     top: 0;
     right: 0;
     left: 0;
-    height: 36px;
-    border-bottom: 1px solid #ddd;
+    height: 56px;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -1863 +1862 @@
     top: 90px;
     right: 0;
-    bottom: 44px;
+    bottom: 58px;
     left: 0;
-    overflow: auto;
 }
 
@@ -1876 +1874 @@
     bottom: 0;
     left: 0;
+    overflow: auto;
 }
 
@@ -1884 +1883 @@
 #plugin-information .fyi {
     background: #f3f3f3;
-    border: 1px solid #ddd;
-    border-top: 0;
+    border-left: 1px solid #ddd;
     color: #666;
     padding: 16px;
@@ -1891 +1889 @@
     top: 0;
     right: 0;
+    bottom: 0;
     width: 217px;
+    overflow: auto;
 }
 
@@ -1923 +1923 @@
 
 #plugin-information-footer {
-    padding: 8px 16px;
+    padding: 15px 16px;
     position: absolute;
     right: 0;
     bottom: 0;
     left: 0;
+    height: 28px;
 }
 
@@ -1975 +1976 @@
     #plugin-information-content {
         overflow: auto;
-        bottom: 62px;
+        bottom: 58px;
     }
 
@@ -1995 +1996 @@
 
     #plugin-information-footer {
-        padding: 12px 16px;
-        height: 37px;
+        padding: 12px 16px 0;
+        height: 46px;
     }
 }
@@ -2032 +2033 @@
 body.plugin-install-php .tb-close-icon,
 body.index-php .tb-close-icon {
-    line-height: 36px;
-    width: 36px;
-    height: 36px;
+    line-height: 48px;
+    width: 48px;
+    height: 48px;
 }
 
 body.plugin-install-php .tb-close-icon:before,
 body.index-php .tb-close-icon:before {
-    line-height: 36px;
+    line-height: 48px;
 }
 

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

@@ -72 +72 @@
     width: -webkit-calc( 100% - 36px );
     width: calc( 100% - 36px );
+}
+
+.mce-wp-help .mce-window-head {
+    border-bottom: none;
 }
 

trunk/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js

@@ -183 +183 @@
             width: 450,
             height: 420,
-            inline: 1
+            inline: 1,
+            classes: 'wp-help'
         });
     });

trunk/src/wp-includes/js/tinymce/wp-mce-help.php

@@ -28 +28 @@
     }
 
-    #tabs-wrap {
+    .wp-core-ui #tabs {
+        margin-top: 1px;
+        padding: 0 6px;
         position: absolute;
         top: 0;
-    }
-
-    #tabs {
-        box-shadow: 0 3px 5px rgba( 255, 255, 255, 0.2 );
+        right: 0;
+        left: 0;
+        height: 31px;
+        z-index: 1;
+    }
+
+    .wp-core-ui #tabs a {
+        position: relative;
+        float: left;
+        padding: 6px 10px;
         margin: 0;
-        padding: 0;
-        position: relative;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-    }
-
-    #tabs a {
+        height: 18px;
+        line-height: 18px;
+        text-decoration: none;
         -webkit-transition: none;
         transition: none;
     }
-    
-    #tabs-wrap #tabs > a {
-        float: left;
-        font-size: 14px;
-        height: 18px;
-        line-height: 18px;
-        margin: 0;
-        padding: 7px 10px;
-        position: relative;
-        text-decoration: none;
-        border-right: 1px solid #ddd;
-        background-color: #eee;
-        color: inherit;
-    }
-
-    #tabs > a:active,
-    #tabs > a:focus {
-        outline: none;
-    }
-
-    #tabs-wrap #tabs .active,
-    #tabs-wrap #tabs .active:hover {
+
+    #tabs a.active {
+        margin: -1px -1px 0;
+        background: #fff;
+        border: 1px solid #ddd;
+        border-bottom: none;
         color: #333;
-        background: #fff;
-        border-bottom: 1px solid #fff;
     }
 
@@ -84 +68 @@
         height: 360px;
         margin: 0;
-        margin-top: 32px;
-        overflow-y: scroll;
+        margin-top: 30px;
+        overflow: auto;
         padding: 10px 16px;
     }
@@ -152 +136 @@
 </script>
 
-<div id="tabs-wrap">
-    <div id="tabs">
-        <a id="tab1" href="javascript:flipTab(1)" title="<?php esc_attr_e('Basics of Rich Editing'); ?>" accesskey="1" class="active"><?php _e('Basics'); ?></a>
-        <a id="tab2" href="javascript:flipTab(2)" title="<?php esc_attr_e('Advanced use of the Rich Editor'); ?>" accesskey="2"><?php _e('Advanced'); ?></a>
-        <a id="tab3" href="javascript:flipTab(3)" title="<?php esc_attr_e('Hotkeys'); ?>" accesskey="3"><?php _e('Hotkeys'); ?></a>
-        <a id="tab4" href="javascript:flipTab(4)" title="<?php esc_attr_e('About the software'); ?>" accesskey="4"><?php _e('About'); ?></a>
-    </div>
+<div id="tabs">
+    <a id="tab1" href="javascript:flipTab(1)" title="<?php esc_attr_e('Basics of Rich Editing'); ?>" accesskey="1" class="active"><?php _e('Basics'); ?></a>
+    <a id="tab2" href="javascript:flipTab(2)" title="<?php esc_attr_e('Advanced use of the Rich Editor'); ?>" accesskey="2"><?php _e('Advanced'); ?></a>
+    <a id="tab3" href="javascript:flipTab(3)" title="<?php esc_attr_e('Hotkeys'); ?>" accesskey="3"><?php _e('Hotkeys'); ?></a>
+    <a id="tab4" href="javascript:flipTab(4)" title="<?php esc_attr_e('About the software'); ?>" accesskey="4"><?php _e('About'); ?></a>
 </div>