WordPress.org

Make WordPress Core

Changeset 22920


Ignore:
Timestamp:
11/29/12 14:36:12 (2 years ago)
Author:
ryan
Message:

Icons for select, deselect, and window close in the media modal.

Props JerrySarcastic, helenyhou, ocean90, lessbloat
fixes #22610

Location:
trunk/wp-includes
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-includes/css/media-views-rtl.css

    r22798 r22920  
    55    left: auto; 
    66    right: 0; 
    7     float: right; 
    87} 
    98 
     
    1110    right: auto; 
    1211    left: 0; 
    13     float: left; 
    1412} 
    1513 
  • trunk/wp-includes/css/media-views.css

    r22919 r22920  
    107107.media-modal-close { 
    108108    position: absolute; 
     109    height: 40px; 
     110} 
     111 
     112.media-modal-title { 
    109113    top: -40px; 
    110     height: 40px; 
     114    left: 0; 
     115    padding: 0; 
     116    margin: 0; 
    111117 
    112118    line-height: 40px; 
    113119    color: #fff; 
     120    font-size: 16px; 
    114121    font-weight: 200; 
    115122    text-shadow: 0 0 16px rgba( 0, 0, 0, 0.6 ); 
    116123} 
    117124 
    118 a.media-modal-close { 
    119     color: #fff; 
    120 } 
    121  
    122 .media-modal-title { 
    123     left: 0; 
    124     float: left; 
    125     padding: 0; 
    126     margin: 0; 
    127     font-size: 16px; 
    128 } 
    129  
    130125.media-modal-close { 
    131     right: 0; 
    132     float: right; 
    133     text-decoration: none; 
    134     font-size: 1.8em; 
    135 } 
    136  
    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 ); 
     126    top: -27px; 
     127    right: 0; 
     128    width: 15px; 
     129    background-position: -80px 0; 
    141130} 
    142131 
     
    153142    overflow: auto; 
    154143    background: #fff; 
     144} 
     145 
     146.media-modal-icon { 
     147    background-image: url(../images/uploader-icons.png); 
     148    background-repeat: no-repeat; 
    155149} 
    156150 
     
    608602 
    609603.attachment .close { 
     604    display: none; 
    610605    position: absolute; 
    611606    top: 5px; 
     
    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 ); 
    628 } 
    629  
    630 .attachment .close { 
    631     display: none; 
    632625} 
    633626 
     
    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 
     
    663650} 
    664651 
    665 .attachment .check .dash { 
    666     font-weight: bold; 
    667     font-size: 18px; 
    668     line-height: 22px; 
    669 } 
    670  
    671 .attachment .check .dash, 
    672 .attachment .check:hover span { 
    673     display: none; 
    674 } 
    675  
    676 .attachment.selected .check, 
    677 .attachment .check:hover .dash { 
     652.attachment .check div { 
     653    background-position: -1px 0; 
     654    height: 15px; 
     655    width: 15px; 
     656    margin: 5px; 
     657} 
     658 
     659.attachment .check:hover div { 
     660    background-position: -40px 0; 
     661} 
     662 
     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 
     
    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; 
     
    701693    font-size: 12px; 
    702694    border-radius: 0; 
     695} 
     696 
     697/** 
     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    } 
    703708} 
    704709 
  • trunk/wp-includes/media.php

    r22902 r22920  
    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"> 
     
    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> 
Note: See TracChangeset for help on using the changeset viewer.