WordPress.org

Make WordPress Core

Ticket #22610: 22610.4.diff

File 22610.4.diff, 4.9 KB (added by helenyhou, 5 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 {