Make WordPress Core

Ticket #28864: 28864.3.patch

File 28864.3.patch, 20.5 KB (added by afercia, 10 years ago)

Refreshed patch: cross browser input line-height

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

     
    114114        clear: both;
    115115}
    116116
     117.contain-floats:after {
     118        content: '';
     119        display: table;
     120        clear: both;
     121}
     122
    117123/* Hide visually but not from screen readers */
    118124.screen-reader-text,
    119125.screen-reader-text span,
  • src/wp-admin/css/media.css

     
    772772        line-height: 16px;
    773773}
    774774
     775.edit-attachment-frame .imgedit-settings input[type="text"] {
     776        padding: 4px 6px;
     777}
     778
    775779.edit-attachment-frame .attachment-info {
    776780        overflow: auto;
    777781        -webkit-box-sizing: border-box;
     
    837841
    838842.imgedit-wrap {
    839843        position: relative;
     844        padding-top: 10px;
    840845}
    841846
    842847.imgedit-settings p {
     
    843848        margin: 8px 0 0;
    844849}
    845850
     851.imgedit-settings fieldset {
     852        margin: 8px 0;
     853}
     854
     855.imgedit-settings legend {
     856        margin-bottom: 5px;
     857}
     858
    846859.describe .imgedit-wrap .imgedit-settings {
    847860        padding: 0 5px;
    848861}
     
    853866
    854867.wp_attachment_holder .imgedit-wrap > div {
    855868        height: auto;
    856         overflow: hidden;
    857869}
    858870
    859871.wp_attachment_holder .imgedit-wrap .imgedit-panel-content {
    860         padding-right: 16px;
    861         width: auto;
    862         overflow: hidden;
     872        padding: 3px 16px 0 0;
     873        float: left;
    863874}
    864875
    865876.wp_attachment_holder .imgedit-wrap .imgedit-settings {
     
    874885
    875886.imgedit-wait {
    876887        position: absolute;
    877         top: 0;
     888        top: 10px;
    878889        background: #fff url(../images/spinner.gif) no-repeat center;
    879890        -webkit-background-size: 20px 20px;
    880891        background-size: 20px 20px;
     
    899910        overflow: hidden;
    900911}
    901912
     913.imgedit-response + .wp_attachment_image {
     914        overflow: visible;
     915}
     916
    902917.wp_attachment_image .button,
    903918.A1B1 .button {
    904919        float: left;
     
    920935        min-width: 300px;
    921936}
    922937
    923 .imgedit-menu div {
     938.wp-core-ui .imgedit-menu button {
    924939        float: left;
     940        -webkit-box-sizing: content-box;
     941        -moz-box-sizing: content-box;
     942        box-sizing: content-box;
    925943        width: 32px;
    926         border: 1px solid #d5d5d5;
     944        height: 32px;
     945        margin: 0 8px 0 0;
     946        padding: 0;
    927947        background: #f1f1f1;
    928         margin: 0 8px 0 0;
    929         height: 32px;
    930948        -webkit-font-smoothing: antialiased;
    931949        -moz-osx-font-smoothing: grayscale;
    932         text-align: center;
    933         line-height: 28px;
     950        line-height: 16px;
    934951        color: #777;
    935952        cursor: pointer;
    936953}
    937954
    938 .imgedit-menu div:before {
     955.imgedit-menu button:before {
    939956        font: normal 20px/1 'dashicons';
    940957        speak: none;
    941958        vertical-align: middle;
    942959}
    943960
    944 .imgedit-menu div:hover {
     961.imgedit-menu button:hover,
     962.imgedit-menu button:focus {
    945963        border-color: #c1c1c1;
    946964        background-color: #eaeaea;
    947965        color: #333;
    948966}
    949967
    950 .imgedit-menu div.disabled {
     968.imgedit-menu button.disabled {
    951969        border-color: #ccc;
    952970        background-color: #ddd;
    953971        color: #777;
     
    10251043}
    10261044
    10271045#poststuff .imgedit-group-top h3 {
     1046        display: inline-block;
    10281047        padding: 0;
    10291048}
    10301049
     
    10331052}
    10341053
    10351054.imgedit-applyto .imgedit-label {
    1036         padding: 2px 0 0;
     1055        padding: .5em 0 0;
    10371056        display: block;
     1057        vertical-align: bottom;
    10381058}
    10391059
    10401060.imgedit-help {
     
    10421062        font-style: italic;
    10431063}
    10441064
    1045 a.imgedit-help-toggle {
    1046         text-decoration: none;
     1065/* higher specificity */
     1066.wp-core-ui .image-editor .imgedit-help-toggle {
     1067        border: none;
     1068        height: auto;
     1069        padding: 0;
     1070        background: transparent;
     1071        color: #0074a2;
     1072        font-size: 20px;
     1073        line-height: 1;
     1074        cursor: pointer;
     1075        -webkit-box-shadow: none;
     1076        box-shadow: none;
    10471077}
    10481078
    10491079.form-table td.imgedit-response {
     
    10701100        vertical-align: middle;
    10711101}
    10721102
     1103.imgedit-save-target {
     1104        margin: 8px 0;
     1105}
     1106
    10731107.imgedit-group {
    10741108        margin-bottom: 8px;
    10751109        padding: 2px 10px;
    10761110}
    10771111
     1112.imgedit-scale input[type="text"],
     1113.imgedit-crop-ratio input[type="text"],
     1114.imgedit-crop-sel input[type="text"] {
     1115        width: 3.57142857em;
     1116        line-height: 1.35714285;
     1117}
     1118
     1119.imgedit-separator {
     1120        display: inline-block;
     1121        width: 0.53846153em;
     1122        text-align: center;
     1123        vertical-align: middle;
     1124        font-size: 13px;
     1125        color: #444;
     1126}
     1127
    10781128audio, video {
    10791129        display: inline-block;
    10801130        max-width: 100%;
  • src/wp-admin/includes/image-edit.php

     
    3838
    3939        ?>
    4040        <div class="imgedit-wrap">
    41         <div id="imgedit-panel-<?php echo $post_id; ?>">
     41        <div id="imgedit-panel-<?php echo $post_id; ?>" class="contain-floats">
    4242
    4343        <div class="imgedit-settings">
    4444        <div class="imgedit-group">
    4545        <div class="imgedit-group-top">
    46                 <h3><?php _e( 'Scale Image' ); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h3>
     46                <h3><?php _e( 'Scale Image' ); ?></h3>
     47                <button type="button" class="dashicons dashicons-editor-help button imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;" aria-expanded="false"><span class="screen-reader-text"><?php esc_html_e( 'Scale Image Help' ); ?></span></button>
    4748                <div class="imgedit-help">
    4849                <p><?php _e('You can proportionally scale the original image. For best results, scaling should be done before you crop, flip, or rotate. Images can only be scaled down, not up.'); ?></p>
    4950                </div>
     
    5152                <p><?php printf( __('Original dimensions %s'), $meta['width'] . ' &times; ' . $meta['height'] ); ?></p>
    5253                <?php endif ?>
    5354                <div class="imgedit-submit">
    54                 <span class="nowrap"><input type="text" id="imgedit-scale-width-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1)" style="width:4em;" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" /> &times; <input type="text" id="imgedit-scale-height-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0)" style="width:4em;" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
    55                 <span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>">!</span></span>
    56                 <input type="button" onclick="imageEdit.action(<?php echo "$post_id, '$nonce'"; ?>, 'scale')" class="button button-primary" value="<?php esc_attr_e( 'Scale' ); ?>" />
     55
     56                <fieldset class="imgedit-scale">
     57                <legend><?php _e('New dimensions:'); ?></legend>
     58                <div class="nowrap">
     59                <label><span class="screen-reader-text"><?php _e( 'scale width' ); ?></span>
     60                <input type="text" id="imgedit-scale-width-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1)" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" />
     61                </label>
     62                <span class="imgedit-separator">&times;</span>
     63                <label><span class="screen-reader-text"><?php _e( 'scale height' ); ?></span>
     64                <input type="text" id="imgedit-scale-height-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0)" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
     65                </label>
     66                <span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>">!</span>
     67                <input id="imgedit-scale-button" type="button" onclick="imageEdit.action(<?php echo "$post_id, '$nonce'"; ?>, 'scale')" class="button button-primary" value="<?php esc_attr_e( 'Scale' ); ?>" />
    5768                </div>
     69                </fieldset>
     70                </div>
    5871        </div>
    5972        </div>
    6073
     
    8194
    8295        <div class="imgedit-group">
    8396        <div class="imgedit-group-top">
    84                 <h3><?php _e('Image Crop'); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h3>
     97                <h3><?php _e('Image Crop'); ?></h3>
     98                <button type="button" class="dashicons dashicons-editor-help button imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;" aria-expanded="false"><span class="screen-reader-text"><?php esc_html_e( 'Image Crop Help' ); ?></span></button>
    8599
    86100                <div class="imgedit-help">
    87101                <p><?php _e('To crop the image, click on it and drag to make your selection.'); ?></p>
     
    94108                </div>
    95109        </div>
    96110
    97         <p>
    98                 <?php _e('Aspect ratio:'); ?>
    99                 <span  class="nowrap">
    100                 <input type="text" id="imgedit-crop-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" style="width:3em;" />
    101                 :
    102                 <input type="text" id="imgedit-crop-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" style="width:3em;" />
    103                 </span>
    104         </p>
     111        <fieldset class="imgedit-crop-ratio">
     112                <legend><?php _e('Aspect ratio:'); ?></legend>
     113                <div class="nowrap">
     114                <label><span class="screen-reader-text"><?php _e( 'crop ratio width' ); ?></span>
     115                <input type="text" id="imgedit-crop-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" />
     116                </label>
     117                <span class="imgedit-separator">:</span>
     118                <label><span class="screen-reader-text"><?php _e( 'crop ratio height' ); ?></span>
     119                <input type="text" id="imgedit-crop-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" />
     120                </label>
     121                </div>
     122        </fieldset>
    105123
    106         <p id="imgedit-crop-sel-<?php echo $post_id; ?>">
    107                 <?php _e('Selection:'); ?>
    108                 <span  class="nowrap">
    109                 <input type="text" id="imgedit-sel-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" style="width:4em;" />
    110                 &times;
    111                 <input type="text" id="imgedit-sel-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" style="width:4em;" />
    112                 </span>
    113         </p>
     124        <fieldset id="imgedit-crop-sel-<?php echo $post_id; ?>" class="imgedit-crop-sel">
     125                <legend><?php _e('Selection:'); ?></legend>
     126                <div class="nowrap">
     127                <label><span class="screen-reader-text"><?php _e( 'selection width' ); ?></span>
     128                <input type="text" id="imgedit-sel-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" />
     129                </label>
     130                <span class="imgedit-separator">&times;</span>
     131                <label><span class="screen-reader-text"><?php _e( 'selection height' ); ?></span>
     132                <input type="text" id="imgedit-sel-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" />
     133                </label>
     134                </div>
     135        </fieldset>
    114136        </div>
    115137
    116138        <?php if ( $thumb && $sub_sizes ) {
     
    119141
    120142        <div class="imgedit-group imgedit-applyto">
    121143        <div class="imgedit-group-top">
    122                 <h3><?php _e('Thumbnail Settings'); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h3>
     144                <h3><?php _e('Thumbnail Settings'); ?></h3>
     145                <button type="button" class="dashicons dashicons-editor-help button imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;" aria-expanded="false"><span class="screen-reader-text"><?php esc_html_e( 'Thumbnail Settings Help' ); ?></span></button>
    123146                <p class="imgedit-help"><?php _e('You can edit the image while preserving the thumbnail. For example, you may wish to have a square thumbnail that displays just a section of the image.'); ?></p>
    124147        </div>
    125148
     
    128151                <br /><?php _e('Current thumbnail'); ?>
    129152        </p>
    130153
    131         <p id="imgedit-save-target-<?php echo $post_id; ?>">
    132                 <strong><?php _e('Apply changes to:'); ?></strong><br />
     154        <div id="imgedit-save-target-<?php echo $post_id; ?>" class="imgedit-save-target">
     155        <fieldset>
     156                <legend><strong><?php _e('Apply changes to:'); ?></strong></legend>
    133157
    134158                <label class="imgedit-label">
    135159                <input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="all" checked="checked" />
     
    142166                <label class="imgedit-label">
    143167                <input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="nothumb" />
    144168                <?php _e('All sizes except thumbnail'); ?></label>
    145         </p>
     169        </fieldset>
    146170        </div>
     171        </div>
    147172
    148173        <?php } ?>
    149174
    150175        </div>
    151176
    152         <div class="imgedit-panel-content">
     177        <div class="imgedit-panel-content contain-floats">
    153178                <?php echo $note; ?>
    154                 <div class="imgedit-menu">
    155                         <div onclick="imageEdit.crop(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-crop disabled" title="<?php esc_attr_e( 'Crop' ); ?>"></div><?php
     179                <div class="imgedit-menu contain-floats">
     180                        <button type="button" onclick="imageEdit.crop(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-crop button disabled"><span class="screen-reader-text"><?php esc_html_e( 'Crop' ); ?></span></button><?php
    156181
    157182                // On some setups GD library does not provide imagerotate() - Ticket #11536
    158183                if ( wp_image_editor_supports( array( 'mime_type' => get_post_mime_type( $post_id ), 'methods' => array( 'rotate' ) ) ) ) { ?>
    159                         <div class="imgedit-rleft"  onclick="imageEdit.rotate( 90, <?php echo "$post_id, '$nonce'"; ?>, this)" title="<?php esc_attr_e( 'Rotate counter-clockwise' ); ?>"></div>
    160                         <div class="imgedit-rright" onclick="imageEdit.rotate(-90, <?php echo "$post_id, '$nonce'"; ?>, this)" title="<?php esc_attr_e( 'Rotate clockwise' ); ?>"></div>
     184                        <button type="button" class="imgedit-rleft button" onclick="imageEdit.rotate( 90, <?php echo "$post_id, '$nonce'"; ?>, this)"><span class="screen-reader-text"><?php esc_html_e( 'Rotate counter-clockwise' ); ?></span></button>
     185                        <button type="button" class="imgedit-rright button" onclick="imageEdit.rotate(-90, <?php echo "$post_id, '$nonce'"; ?>, this)"><span class="screen-reader-text"><?php esc_html_e( 'Rotate clockwise' ); ?></span></button>
    161186        <?php } else {
    162187                        $note_no_rotate = esc_attr__('Image rotation is not supported by your web host.');
    163188        ?>
    164                     <div class="imgedit-rleft disabled"  title="<?php echo $note_no_rotate; ?>"></div>
    165                     <div class="imgedit-rright disabled" title="<?php echo $note_no_rotate; ?>"></div>
     189                        <button type="button" class="imgedit-rleft button disabled" title="<?php echo $note_no_rotate; ?>" disabled></button>
     190                        <button type="button" class="imgedit-rright button disabled" title="<?php echo $note_no_rotate; ?>" disabled></button>
    166191        <?php } ?>
    167192
    168                         <div onclick="imageEdit.flip(1, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-flipv" title="<?php esc_attr_e( 'Flip vertically' ); ?>"></div>
    169                         <div onclick="imageEdit.flip(2, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-fliph" title="<?php esc_attr_e( 'Flip horizontally' ); ?>"></div>
     193                        <button type="button" onclick="imageEdit.flip(1, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-flipv button"><span class="screen-reader-text"><?php esc_html_e( 'Flip vertically' ); ?></span></button>
     194                        <button type="button" onclick="imageEdit.flip(2, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-fliph button"><span class="screen-reader-text"><?php esc_html_e( 'Flip horizontally' ); ?></span></button>
    170195
    171                         <div id="image-undo-<?php echo $post_id; ?>" onclick="imageEdit.undo(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-undo disabled" title="<?php esc_attr_e( 'Undo' ); ?>"></div>
    172                         <div id="image-redo-<?php echo $post_id; ?>" onclick="imageEdit.redo(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-redo disabled" title="<?php esc_attr_e( 'Redo' ); ?>"></div>
    173                         <br class="clear" />
     196                        <button type="button" id="image-undo-<?php echo $post_id; ?>" onclick="imageEdit.undo(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-undo button disabled"><span class="screen-reader-text"><?php esc_html_e( 'Undo' ); ?></span></button>
     197                        <button type="button" id="image-redo-<?php echo $post_id; ?>" onclick="imageEdit.redo(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-redo button disabled"><span class="screen-reader-text"><?php esc_html_e( 'Redo' ); ?></span></button>
    174198                </div>
    175199
    176200                <input type="hidden" id="imgedit-sizer-<?php echo $post_id; ?>" value="<?php echo $sizer; ?>" />
     
    181205                <input type="hidden" id="imgedit-y-<?php echo $post_id; ?>" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
    182206
    183207                <div id="imgedit-crop-<?php echo $post_id; ?>" class="imgedit-crop-wrap">
    184                 <img id="image-preview-<?php echo $post_id; ?>" onload="imageEdit.imgLoaded('<?php echo $post_id; ?>')" src="<?php echo admin_url( 'admin-ajax.php', 'relative' ); ?>?action=imgedit-preview&amp;_ajax_nonce=<?php echo $nonce; ?>&amp;postid=<?php echo $post_id; ?>&amp;rand=<?php echo rand(1, 99999); ?>" />
     208                <img id="image-preview-<?php echo $post_id; ?>" onload="imageEdit.imgLoaded('<?php echo $post_id; ?>')" src="<?php echo admin_url( 'admin-ajax.php', 'relative' ); ?>?action=imgedit-preview&amp;_ajax_nonce=<?php echo $nonce; ?>&amp;postid=<?php echo $post_id; ?>&amp;rand=<?php echo rand(1, 99999); ?>" alt="" />
    185209                </div>
    186210
    187211                <div class="imgedit-submit">
     
    538562
    539563        $img = wp_get_image_editor( _load_image_to_edit_path( $post_id ) );
    540564
    541     if ( is_wp_error( $img ) )
    542         return false;
     565        if ( is_wp_error( $img ) )
     566                return false;
    543567
    544568        $changes = !empty($_REQUEST['history']) ? json_decode( wp_unslash($_REQUEST['history']) ) : null;
    545569        if ( $changes )
  • src/wp-admin/includes/media.php

     
    26532653
    26542654                <div class="imgedit-response" id="imgedit-response-<?php echo $attachment_id; ?>"></div>
    26552655
    2656                 <div<?php if ( $open ) echo ' style="display:none"'; ?> class="wp_attachment_image" id="media-head-<?php echo $attachment_id; ?>">
     2656                <div<?php if ( $open ) echo ' style="display:none"'; ?> class="wp_attachment_image contain-floats" id="media-head-<?php echo $attachment_id; ?>">
    26572657                        <p id="thumbnail-head-<?php echo $attachment_id; ?>"><img class="thumbnail" src="<?php echo set_url_scheme( $thumb_url[0] ); ?>" style="max-width:100%" alt="" /></p>
    26582658                        <p><?php echo $image_edit_button; ?></p>
    26592659                </div>
  • src/wp-admin/js/image-edit.js

     
    5656                var wait = $('#imgedit-wait-' + postid);
    5757
    5858                if ( toggle ) {
    59                         wait.height( $('#imgedit-panel-' + postid).height() ).fadeIn('fast');
     59                        wait.innerHeight( $('#imgedit-panel-' + postid).height() ).fadeIn('fast');
    6060                } else {
    6161                        wait.fadeOut('fast');
    6262                }
     
    6363        },
    6464
    6565        toggleHelp : function(el) {
    66                 $( el ).parents( '.imgedit-group-top' ).toggleClass( 'imgedit-help-toggled' ).find( '.imgedit-help' ).slideToggle( 'fast' );
     66                var $el = $( el );
     67                $el.parents( '.imgedit-group-top' ).toggleClass( 'imgedit-help-toggled' ).find( '.imgedit-help' ).slideToggle( 'fast' );
     68                $el.attr( 'aria-expanded', 'false' === $el.attr( 'aria-expanded' ) ? 'true' : 'false' );
    6769                return false;
    6870        },
    6971
     
    246248                        if ( t._view ) {
    247249                                t._view.refresh();
    248250                        }
     251                        // Restore focus on the 'Scale' button after frame is refreshed.
     252                        $( '#imgedit-scale-button' ).focus();
    249253                });
    250254        },
    251255
  • src/wp-includes/css/media-views.css

     
    99
    1010.media-frame input,
    1111.media-frame select,
    12 .media-frame textarea {
     12.media-frame textarea,
     13.media-modal input {
    1314    -webkit-box-sizing: border-box;
    1415    -moz-box-sizing: border-box;
    1516    box-sizing: border-box;
     
    2122        font-size: 12px;
    2223}
    2324
     25.media-modal legend,
     26.media-modal label {
     27        font-size: 13px;
     28}
     29
    2430.media-frame input,
    2531.media-frame textarea {
    2632        padding: 6px 8px;
     
    387393        margin: 1px;
    388394        width: 65%;
    389395        float: right;
     396        line-height: 1.35714285;
    390397}
    391398
    392399.media-sidebar .setting .value,
     
    16761683.media-modal .imgedit-wrap .imgedit-settings {
    16771684        background: #f3f3f3;
    16781685        border-left: 1px solid #ddd;
    1679         padding: 0 16px 16px;
     1686        padding: 20px 16px 16px;
    16801687        position: absolute;
    16811688        top: 0;
    16821689        right: 0;
     
    17041711        padding: 0;
    17051712}
    17061713
     1714.media-modal .imgedit-group-top {
     1715        margin: 0;
     1716}
     1717
    17071718.media-modal .imgedit-group-top h3 {
     1719        display: inline-block;
    17081720        text-transform: uppercase;
    17091721        font-size: 12px;
    17101722        color: #666;
    17111723        margin: 0;
    1712         margin-top: 24px;
     1724        margin-top: 4px;
    17131725}
    17141726
    17151727.media-modal .imgedit-group-top h3 a {
     
    17171729        color: #666;
    17181730}
    17191731
    1720 .media-modal .imgedit-help-toggle {
    1721         margin-top: -2px;
     1732/* higher specificity */
     1733.wp-core-ui.media-modal .image-editor .imgedit-help-toggle {
     1734        margin-top: 2px;
    17221735        cursor: pointer;
    17231736        color: #666;
    17241737}
    17251738
     1739.wp-core-ui.media-modal .image-editor h3 .imgedit-help-toggle {
     1740        margin-top: -2px;
     1741}
     1742
    17261743.media-modal .imgedit-help-toggled span.dashicons:before {
    17271744        content: '\f142';
    17281745}