WordPress.org

Make WordPress Core

Ticket #22610: 22610.3.diff

File 22610.3.diff, 4.7 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>
     
    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 */
     
    642636        position: absolute;
    643637        top: -7px;
    644638        right: -7px;
    645         line-height: 24px;
    646         font-size: 16px;
    647         text-align: center;
    648         text-decoration: none;
    649639        outline: none;
    650640
    651         color: #333;
    652641        border: 1px solid #fff;
    653642        border-radius: 3px;
    654         text-shadow: 0 1px 0 #fff;
    655643        box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.4 );
    656644
    657         background: #f1f1f1;
     645        background-color: #f1f1f1;
    658646        background-image: -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#e1e1e1));
    659647        background-image: -webkit-linear-gradient(top, #f1f1f1, #e1e1e1);
    660648        background-image:    -moz-linear-gradient(top, #f1f1f1, #e1e1e1);
     
    662650        background-image:   linear-gradient(to bottom, #f1f1f1, #e1e1e1);
    663651}
    664652
    665 .attachment .check .dash {
    666         font-weight: bold;
    667         font-size: 18px;
    668         line-height: 22px;
     653.attachment .check div {
     654        background-position: -1px 0;
     655        height: 15px;
     656        width: 15px;
     657        margin: 5px;
    669658}
    670659
    671 .attachment .check .dash,
    672 .attachment .check:hover span {
    673         display: none;
     660.attachment .check:hover div {
     661        background-position: -40px 0;
    674662}
    675663
    676 .attachment.selected .check,
    677 .attachment .check:hover .dash {
     664.attachment.selected .check {
    678665        display: block;
    679666}
    680667
    681668.attachment.details .check {
    682         color: #fff;
    683         text-shadow: 0 1px 0 rgba( 0, 0, 0, 0.5 );
    684669        box-shadow: 0 0 0 1px #1e8cbe;
    685670
    686         background: #1e8cbe;
     671        background-color: #1e8cbe;
    687672        background-image: -webkit-gradient(linear, left top, left bottom, from(#1e8cbe), to(#0074a2));
    688673        background-image: -webkit-linear-gradient(top, #1e8cbe, #0074a2);
    689674        background-image:    -moz-linear-gradient(top, #1e8cbe, #0074a2);
     
    691676        background-image:   linear-gradient(to bottom, #1e8cbe, #0074a2);
    692677}
    693678
     679.attachment.details .check div {
     680        background-position: -21px 0;
     681}
     682
     683.attachment.details .check:hover div {
     684        background-position: -60px 0;
     685}
     686
    694687.media-frame .describe {
    695688        position: relative;
    696689        display: block;
     
    703696}
    704697
    705698/**
     699 * HiDPI Displays
     700 */
     701@media print,
     702  (-o-min-device-pixel-ratio: 5/4),
     703  (-webkit-min-device-pixel-ratio: 1.25),
     704  (min-resolution: 120dpi) {
     705        .media-modal-icon {
     706                background-image: url(../images/uploader-icons-2x.png);
     707                background-size: 95px 15px;
     708        }
     709}
     710
     711/**
    706712 * Attachments Browser
    707713 */
    708714.media-frame .attachments-browser {