WordPress.org

Make WordPress Core

Changeset 22920


Ignore:
Timestamp:
11/29/2012 02:36:12 PM (5 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.