WordPress.org

Plugin Directory

Changeset 568239


Ignore:
Timestamp:
07/06/12 11:26:06 (22 months ago)
Author:
hugobaeta
Message:

updated css to have retina ready graphics

File:
1 edited

Legend:

Unmodified
Added
Removed
  • jetpack/trunk/_inc/jetpack.css

    r566780 r568239  
    1010    #jp-header #jp-clouds { 
    1111        position: relative; 
    12         background: transparent url( images/header-clouds-20110719.png ) -400px 100% repeat-x; 
     12        background: transparent url( images/header-clouds.png ) -315px 100% repeat-x; 
    1313        padding-top: 110px; 
    1414        -webkit-border-radius: 3px; 
     
    1717    } 
    1818        #jp-header.small #jp-clouds { 
    19             background: transparent url( images/header-clouds-sm-20110719.png ) -220px 100% repeat-x; 
     19            background: transparent url( images/header-clouds-small.png ) -120px 100% repeat-x; 
    2020            padding: 50px 0 0 0; 
    2121            height: 70px; 
     
    3131 
    3232        #jp-header #jp-clouds #jp-disconnect a { 
    33             background: #8caa46 url( images/status-light.png ) 4px 90% no-repeat; 
     33            background: #8caa46 url( images/status-light.png ) 3px 85% no-repeat; 
    3434            display: inline-block; 
    3535            padding: 4px 10px 3px 30px; 
     
    4747        } 
    4848            #jp-header #jp-clouds #jp-disconnect a:hover { 
    49                 background: #8caa46 url( images/status-light.png ) 4px 3% no-repeat; 
     49                background: #8caa46 url( images/status-light.png ) 3px 5% no-repeat; 
    5050                background-color: #839f40; 
    5151                border-color: #6a8037; 
     
    5353 
    5454            #jp-header #jp-clouds #jp-disconnect span { display: none; } 
    55  
     55     
     56    /* Retina Header Clouds & Status Light */ 
     57    @media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { 
     58        #jp-header #jp-clouds { 
     59            background: transparent url( images/header-clouds-2x.png ) -315px 100% repeat-x; 
     60            background-size:1600px 400px; 
     61        } 
     62            #jp-header.small #jp-clouds { 
     63                background: transparent url( images/header-clouds-small-2x.png ) -120px 100% repeat-x; 
     64                background-size:980px 140px; 
     65            } 
     66             
     67        #jp-header #jp-clouds #jp-disconnect a { 
     68            background: #8caa46 url( images/status-light-2x.png ) 3px 85% no-repeat; 
     69            background-size:25px 57px; 
     70        } 
     71            #jp-header #jp-clouds #jp-disconnect a:hover { 
     72                background: #8caa46 url( images/status-light-2x.png ) 3px 5% no-repeat; 
     73                background-size:25px 57px; 
     74            } 
     75    } 
     76     
     77     
    5678    #jp-header h3 { 
    5779        position: relative; 
     
    7294            top: -35px; 
    7395        } 
    74  
     96     
     97    /* Retina Logo */ 
     98    @media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { 
     99        #jp-header h3 { 
     100            background: transparent url( images/logo-2x.png ) top left no-repeat; 
     101            background-size:250px 200px; 
     102        } 
     103            #jp-header.small h3 { 
     104                background: transparent url( images/logo-small-2x.png ) top left no-repeat; 
     105                background-size:150px 120px; 
     106            } 
     107    } 
     108     
     109     
     110     
    75111    #jp-header p { 
    76112        position: absolute; 
     
    151187    -webkit-border-radius: 3px; 
    152188    border-radius: 3px; 
    153     background: url( images/cloudybox-back.png ) 100% 100% no-repeat; 
     189    background: url( images/alertbox-clouds.png ) 100% 100% no-repeat; 
    154190    background-color: #6aafcf !important; 
    155191    -webkit-box-shadow: inset 0 0 15px rgba( 0,0,0,0.04 ); 
     
    160196    line-height: 180%; 
    161197} 
     198 
     199/* Retina alertbox clouds */ 
     200@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { 
     201    .jetpack-message { 
     202        background: url( images/alertbox-clouds-2x.png ) 100% 100% no-repeat; 
     203        background-size:95px 55px; 
     204    } 
     205} 
     206 
    162207    .jp-connect { padding: 10px 0 5px !important; } 
    163208 
     
    257302        overflow: visible !important; 
    258303        color: #666 !important; 
    259         background: transparent url( images/module-clouds-sm.png ) bottom left repeat-x; 
     304        background: transparent url( images/module-clouds.png ) bottom left repeat-x; 
    260305        background-color: #f0f0f0 !important; 
    261306        border-color: #dcdcdc !important; 
     
    265310        box-shadow: inset 0 0 20px rgba(0,0,0,0.05), 0 1px 2px rgba( 0,0,0,0.1 ); 
    266311    } 
     312     
     313    /* Retina moreinfo bg clouds */ 
     314    @media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { 
     315        .more-info { 
     316            background: transparent url( images/module-clouds-2x.png ) bottom left repeat-x; 
     317            background-size:980px 140px; 
     318        } 
     319    } 
     320     
     321     
    267322        .more-info h4 { 
    268323            padding: 0; 
     
    284339            top: -16px; 
    285340            left: 0; 
    286             background: url( images/arrow.gif ) top left no-repeat; 
     341            background: url( images/arrow.png ) top left no-repeat; 
     342        } 
     343         
     344        /* Retina module more info arrow */ 
     345        @media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { 
     346            .more-info .arrow { 
     347                background: url( images/arrow.png ) top left no-repeat; 
     348                background-size:29px 16px; 
     349            } 
    287350        } 
    288351 
     
    655718            margin-top: 55px; 
    656719            text-align: center; 
    657             background: transparent url(images/comingsoon.png) top center no-repeat; 
     720            background: transparent url(images/icon-comingsoon.png) top center no-repeat; 
    658721            padding: 40px 0 0 0; 
    659722            margin-right: 15px; 
    660723            box-shadow: none; 
     724        } 
     725         
     726        @media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { 
     727            .placeholder h3  { 
     728                background: transparent url(images/icon-comingsoon-2x.png) top center no-repeat; 
     729                background-size:32px 32px; 
     730            } 
    661731        } 
    662732 
     
    677747 
    678748#jp-footer { 
    679     background: url( images/footer-clouds-20110719.png ) top center no-repeat; 
     749    background: url( images/footer-clouds.png ) top center no-repeat; 
    680750    margin: 30px 0; 
    681751    padding-top: 60px; 
    682752    text-align: center; 
    683753} 
     754 
     755@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { 
     756    #jp-footer  { 
     757        background: url( images/footer-clouds-2x.png ) top center no-repeat; 
     758        background-size:700px 150px; 
     759    } 
     760} 
     761 
    684762 
    685763    #jp-footer .automattic { 
     
    705783            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; 
    706784            opacity: 0.5; 
     785        } 
     786        @media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { 
     787            #jp-footer .automattic span  { 
     788                background: url( images/automattic-2x.png ) center top no-repeat; 
     789                background-size:165px 14px; 
     790            } 
    707791        } 
    708792 
Note: See TracChangeset for help on using the changeset viewer.