WordPress.org

Make WordPress Core

Ticket #22610: 22610.4.diff

File 22610.4.diff, 4.9 KB (added by helenyhou, 3 years ago)
  • wp-includes/media.php

     
    15071507        <script type="text/html" id="tmpl-media-modal"> 
    15081508                <div class="media-modal"> 
    15091509                        <h3 class="media-modal-title">{{ data.title }}</h3> 
    1510                         <a class="media-modal-close" href="" title="<?php esc_attr_e('Close'); ?>">&times;</a> 
     1510                        <a class="media-modal-close media-modal-icon" href="#" title="<?php esc_attr_e('Close'); ?>"></a> 
    15111511                </div> 
    15121512                <div class="media-modal-backdrop"> 
    15131513                        <div></div> 
     
    16201620                        <# } #> 
    16211621 
    16221622                        <# if ( data.buttons.close ) { #> 
    1623                                 <a class="close button" href="#">&times;</a> 
     1623                                <a class="close media-modal-icon" href="#" title="<?php _e('Remove'); ?>"></a> 
    16241624                        <# } #> 
    16251625 
    16261626                        <# if ( data.buttons.check ) { #> 
    1627                                 <a class="check" href="#"><span>&#10003;</span><span class="dash">&ndash;</span></a> 
     1627                                <a class="check" href="#" title="<?php _e('Deselect'); ?>"><div class="media-modal-icon"></div></a> 
    16281628                        <# } #> 
    16291629                </div> 
    16301630                <# if ( data.describe ) { #> 
  • wp-includes/css/media-views-rtl.css

     
    44.media-modal-title { 
    55        left: auto; 
    66        right: 0; 
    7         float: right; 
    87} 
    98 
    109.media-modal-close { 
    1110        right: auto; 
    1211        left: 0; 
    13         float: left; 
    1412} 
    1513 
    1614/** 
  • wp-includes/css/media-views.css

     
    106106.media-modal-title, 
    107107.media-modal-close { 
    108108        position: absolute; 
    109         top: -40px; 
    110109        height: 40px; 
    111  
    112         line-height: 40px; 
    113         color: #fff; 
    114         font-weight: 200; 
    115         text-shadow: 0 0 16px rgba( 0, 0, 0, 0.6 ); 
    116110} 
    117111 
    118 a.media-modal-close { 
    119         color: #fff; 
    120 } 
    121  
    122112.media-modal-title { 
     113        top: -40px; 
    123114        left: 0; 
    124         float: left; 
    125115        padding: 0; 
    126116        margin: 0; 
     117 
     118        line-height: 40px; 
     119        color: #fff; 
    127120        font-size: 16px; 
     121        font-weight: 200; 
     122        text-shadow: 0 0 16px rgba( 0, 0, 0, 0.6 ); 
    128123} 
    129124 
    130125.media-modal-close { 
     126        top: -27px; 
    131127        right: 0; 
    132         float: right; 
    133         text-decoration: none; 
    134         font-size: 1.8em; 
     128        width: 15px; 
     129        background-position: -80px 0; 
    135130} 
    136131 
    137 .media-modal-close:hover, 
    138 .media-modal-close:focus { 
    139         color: #fff; 
    140         text-shadow: 0 0 16px rgba( 255, 255, 255, 0.8 ); 
    141 } 
    142  
    143132.media-modal-close:active { 
    144133        outline: 0; 
    145134} 
     
    154143        background: #fff; 
    155144} 
    156145 
     146.media-modal-icon { 
     147        background-image: url(../images/uploader-icons.png); 
     148        background-repeat: no-repeat; 
     149} 
     150 
    157151/** 
    158152 * Toolbar 
    159153 */ 
     
    607601} 
    608602 
    609603.attachment .close { 
     604        display: none; 
    610605        position: absolute; 
    611606        top: 5px; 
    612607        right: 5px; 
     
    618613        text-align: center; 
    619614        text-decoration: none; 
    620615        color: #464646; 
    621         background: #fff; 
     616        background-color: #fff; 
     617        background-position: -96px 4px; 
    622618        border-width: 0; 
     619        border-radius: 3px; 
    623620        box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 ); 
    624621} 
    625622 
    626 .attachment .button:hover { 
     623.attachment .close:hover { 
    627624        box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 ); 
    628625} 
    629626 
    630 .attachment .close { 
    631         display: none; 
    632 } 
    633  
    634627.attachment:hover .close { 
    635628        display: block; 
    636629} 
     
    642635        position: absolute; 
    643636        top: -7px; 
    644637        right: -7px; 
    645         line-height: 24px; 
    646         font-size: 16px; 
    647         text-align: center; 
    648         text-decoration: none; 
    649638        outline: none; 
    650639 
    651         color: #333; 
    652640        border: 1px solid #fff; 
    653641        border-radius: 3px; 
    654         text-shadow: 0 1px 0 #fff; 
    655642        box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.4 ); 
    656643 
    657644        background: #f1f1f1; 
     
    662649        background-image:   linear-gradient(to bottom, #f1f1f1, #e1e1e1); 
    663650} 
    664651 
    665 .attachment .check .dash { 
    666         font-weight: bold; 
    667         font-size: 18px; 
    668         line-height: 22px; 
     652.attachment .check div { 
     653        background-position: -1px 0; 
     654        height: 15px; 
     655        width: 15px; 
     656        margin: 5px; 
    669657} 
    670658 
    671 .attachment .check .dash, 
    672 .attachment .check:hover span { 
    673         display: none; 
     659.attachment .check:hover div { 
     660        background-position: -40px 0; 
    674661} 
    675662 
    676 .attachment.selected .check, 
    677 .attachment .check:hover .dash { 
     663.attachment.selected .check { 
    678664        display: block; 
    679665} 
    680666 
    681667.attachment.details .check { 
    682         color: #fff; 
    683         text-shadow: 0 1px 0 rgba( 0, 0, 0, 0.5 ); 
    684668        box-shadow: 0 0 0 1px #1e8cbe; 
    685669 
    686670        background: #1e8cbe; 
     
    691675        background-image:   linear-gradient(to bottom, #1e8cbe, #0074a2); 
    692676} 
    693677 
     678.attachment.details .check div { 
     679        background-position: -21px 0; 
     680} 
     681 
     682.attachment.details .check:hover div { 
     683        background-position: -60px 0; 
     684} 
     685 
    694686.media-frame .describe { 
    695687        position: relative; 
    696688        display: block; 
     
    703695} 
    704696 
    705697/** 
     698 * HiDPI Displays 
     699 */ 
     700@media print, 
     701  (-o-min-device-pixel-ratio: 5/4), 
     702  (-webkit-min-device-pixel-ratio: 1.25), 
     703  (min-resolution: 120dpi) { 
     704        .media-modal-icon { 
     705                background-image: url(../images/uploader-icons-2x.png); 
     706                background-size: 134px 15px; 
     707        } 
     708} 
     709 
     710/** 
    706711 * Attachments Browser 
    707712 */ 
    708713.media-frame .attachments-browser {