WordPress.org
Get WordPress

Making WordPress.org

Changeset 1409


Ignore:
Timestamp:
03/17/2015 11:37:22 PM (10 years ago)
Author:
obenland
Message:

WP.org Themes: Design parity between modal and singular theme page.

  • Uses Dashicons to display rating stars.
  • Removes the dependency on admin themes styles.

See #950.

Location:
sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/content-single.php

    r1383 r1409  
    33$theme = themes_api('theme_information', array( 'slug' => $slug ) );
    44?>
     5<div class="theme-navigation">
     6    <a class="close" rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php _e( 'Return to Themes List', 'wporg-themes' ); ?></a>
     7    <?php the_post_navigation( array(
     8        'prev_text' => '<span class="screen-reader-text">' . __( 'Next', 'wporg-themes' ) . '</span>',
     9        'next_text' => '<span class="screen-reader-text">' . __( 'Previous', 'wporg-themes' ) . '</span>',
     10    ) ); ?>
     11</div>
    512<div class="theme-wrap">
    613    <div class="theme-about hentry" itemscope itemtype="http://schema.org/CreativeWork">
    … …  
    1219        <?php endif; ?>
    1320
    14         <div class="theme-head">
     21        <div>
    1522            <h3 class="theme-name entry-title" itemprop="name"><?php the_title(); ?></h3>
    1623            <h4 class="theme-author">
    17                 <?php printf( _x( 'By %s', 'post author', 'wporg-themes' ), sprintf( '<a href="https://profiles.wordpress.org/%s"><span class="author" itemprop="author">%s</span></a>', get_the_author_meta( 'nicename' ), esc_html( get_the_author() ) ) ); ?>
     24                <?php printf( _x( 'by %s', 'post author', 'wporg-themes' ), sprintf( '<a href="https://wordpress.org/themes/author/%s/"><span class="author" itemprop="author">%s</span></a>', get_the_author_meta( 'nicename' ), esc_html( get_the_author() ) ) ); ?>
    1825            </h4>
     26        </div>
    1927
    20             <div class="theme-actions">
    21                 <a href="<?php echo esc_url( '//wp-themes.com/' . $slug ); ?>" class="button button-secondary"><?php _e( 'Preview' ); ?></a>
    22                 <a href="<?php echo esc_url( '//downloads.wordpress.org/theme/' . $slug . '.' . $theme->version . '.zip' ); ?>" class="button button-primary"><?php _e( 'Download' ); ?></a>
     28        <div class="theme-head">
     29            <div class="theme-actions clear">
     30                <a href="<?php echo esc_url( '//wp-themes.com/' . $slug ); ?>" class="button button-secondary alignleft"><?php _e( 'Preview' ); ?></a>
     31                <a href="<?php echo esc_url( '//downloads.wordpress.org/theme/' . $slug . '.' . $theme->version . '.zip' ); ?>" class="button button-primary alignright"><?php _e( 'Download' ); ?></a>
    2332            </div>
    2433
    … …  
    4453
    4554        <div class="theme-info">
    46             <div class="screenshot"><?php the_post_thumbnail( '798' ); ?></div>
     55            <div class="screenshot"><?php the_post_thumbnail( '571' ); ?></div>
    4756
    4857            <div class="theme-description entry-summary" itemprop="description"><?php the_content(); ?></div>
    … …  
    106115                    }
    107116                </script>
    108                 <p class="total-downloads"><?php printf( __( 'Total downloads: %s' ), '<strong>' . $theme->downloaded . '</strong>' ); ?></p>
     117                <p class="total-downloads"><?php printf( __( 'Total downloads: %s' ), '<strong>' . number_format_i18n( $theme->downloaded ) . '</strong>' ); ?></p>
    109118            </div><!-- .theme-downloads -->
    110119        </div><!-- .theme-info -->
    … …  
    112121        <div class="theme-meta">
    113122            <div class="theme-ratings" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
    114                 <meta itemprop="ratingValue" content="<?php echo esc_attr( number_format_i18n( $theme->rating / 20, 1 ) ); ?>"/>
    115123                <meta itemprop="ratingCount" content="<?php echo esc_attr( $theme->num_ratings ); ?>"/>
    116124                <h4><?php _e( 'Ratings', 'wporg-themes' ); ?></h4>
    117125
    118                 <div class="rating">
    119                     <div class="star-holder">
    120                         <div class="star-rating" style="width: <?php echo esc_attr( number_format_i18n( $theme->rating, 1 ) ); ?>%">
    121                             <?php printf( __( '%d stars', 'wporg-themes' ), number_format_i18n( $theme->rating / 20 ) ); ?>
    122                         </div>
     126                <?php if ( ! empty( $theme->ratings ) ) : ?>
     127                    <div class="rating rating-<?php echo esc_attr( number_format( $theme->rating ) ); ?>">
     128                        <span class="one"></span>
     129                        <span class="two"></span>
     130                        <span class="three"></span>
     131                        <span class="four"></span>
     132                        <span class="five"></span>
     133                        <p class="description"><?php printf( __( '%s out of 5 stars.', 'wporg-themes' ), '<span itemprop="ratingValue">' . number_format_i18n( $theme->rating / 20, 1 )  . '</span>' ); ?></p>
    123134                    </div>
    124                     <p class="description"><?php printf( __( '%s out of 5 stars.', 'wporg-themes' ), number_format_i18n( $theme->rating / 20, 1 ) ); ?></p>
    125                 </div>
     135                <?php else : ?>
     136                    <div class="rating">
     137                        <div class="ratings"><?php _e( 'This theme has not been rated yet.', 'wporg-themes' ); ?></div>
     138                    </div>
     139                <?php endif; ?>
    126140
    127141                <?php if ( ! empty( $theme->ratings ) && ! empty( $theme->num_ratings ) ) : ?>
    … …  
    130144                        foreach ( $theme->ratings as $key => $rate_count ) :
    131145                            // Hack to have descending key/value pairs.
    132                             $key        = 6 - $key;
    133                             $rate_count = $theme->ratings[ $key ];
     146                            $key = 6 - $key;
    134147                    ?>
    135148                    <li class="counter-container">
    136                         <a href="//wordpress.org/support/view/theme-reviews/<?php echo esc_attr( $slug ); ?>?filter=<?php echo $key; ?>" title="<?php printf( _n( 'Click to see reviews that provided a rating of %d star', 'Click to see reviews that provided a rating of %d stars', $key, 'wporg-themes' ), $key ); ?>">
    137                             <span class="counter-label"><?php printf( __( '%d stars', 'wporg-themes' ), $key ); ?></span>
     149                        <a href="//wordpress.org/support/view/theme-reviews/<?php echo esc_attr( $slug ); ?>?filter=<?php echo $key; ?>" title="<?php echo esc_attr( sprintf( _n( 'Click to see reviews that provided a rating of %d star', 'Click to see reviews that provided a rating of %d stars', $key, 'wporg-themes' ), $key ) ); ?>">
     150                            <span class="counter-label"><?php printf( _n( '%d star', '%d stars', $key, 'wporg-themes' ), $key ); ?></span>
    138151                            <span class="counter-back">
    139                                 <span class="counter-bar" style="width: <?php echo 100 * ( $rate_count / $theme->num_ratings ); ?>px;"></span>
     152                                <span class="counter-bar" style="width: <?php echo 100 * ( $theme->ratings[ $key ] / $theme->num_ratings ); ?>%;"></span>
    140153                            </span>
    141                             <span class="counter-count"><?php echo $rate_count; ?></span>
     154                            <span class="counter-count"><?php echo $theme->ratings[ $key ]; ?></span>
    142155                        </a>
    143156                    </li>
    … …  
    145158                </ul>
    146159                <?php endif; ?>
     160
     161                <a class="button button-secondary" href="https://wordpress.org/support/view/theme-reviews/<?php echo esc_attr( $slug ); ?>#postform"><?php _e( 'Add your review', 'wporg-themes' ); ?></a>
    147162            </div><!-- .theme-rating -->
    148163
    … …  
    174189        </div><!-- .theme-meta -->
    175190    </div>
    176     <div class="theme-footer">
    177         <a class="index-link" rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php _e( 'Return to Themes List', 'wporg-themes' ); ?></a>
    178         <?php the_post_navigation( array(
    179             'prev_text' => '<span class="screen-reader-text">' . __( 'Next', 'wporg-themes' ) . '</span>',
    180             'next_text' => '<span class="screen-reader-text">' . __( 'Previous', 'wporg-themes' ) . '</span>',
    181         ) ); ?>
    182     </div>
    183191</div>

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/functions.php

    r1386 r1409  
    3838 */
    3939function wporg_themes_scripts() {
    40 
    41     wp_enqueue_style( 'ratings', '//wordpress.org/extend/themes-plugins/bb-ratings/bb-ratings.css', array(), '4' );
    42     wp_enqueue_style( 'themes-style', self_admin_url( 'css/themes.css' ) );
    43     wp_enqueue_style( 'wporg-themes-style', get_stylesheet_uri(), array(), filemtime( __DIR__ . '/style.css' ) );
    44 
    45     wp_enqueue_script( 'google-jsapi', '//www.google.com/jsapi', array( 'jquery' ), null );
     40    wp_enqueue_style( 'wporg-themes', get_stylesheet_uri(), array(), filemtime( __DIR__ . '/style.css' ) );
    4641
    4742    if ( ! is_singular( 'page' ) ) {
     43        wp_enqueue_script( 'google-jsapi', '//www.google.com/jsapi', array( 'jquery' ), null );
     44
    4845        wp_enqueue_script( 'theme', self_admin_url( 'js/theme.js' ), array( 'wp-backbone' ), false, true );
    4946        wp_enqueue_script( 'wporg-theme', get_template_directory_uri() . '/js/theme.js', array( 'theme' ), filemtime( __DIR__ . '/js/theme.js' ), true );
    … …  
    7774}
    7875add_action( 'wp_enqueue_scripts', 'wporg_themes_scripts' );
     76
     77/**
     78 * Extend the default WordPress body classes.
     79 *
     80 * Adds body classes to denote singular themes.
     81 *
     82 * @param array $classes A list of existing body class values.
     83 * @return array The filtered body class list.
     84 */
     85function wporg_themes_body_class( $classes ) {
     86    if ( is_singular( 'repopackage' ) ) {
     87        $classes[] = 'modal-open';
     88    }
     89
     90    return $classes;
     91}
     92add_filter( 'body_class', 'wporg_themes_body_class' );
    7993
    8094/**

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/js/theme.js

    r1394 r1409  
    478478        collapse: function( event ) {
    479479            var self = this,
    480                 args = {},
    481                 scroll, author, search, tags, sorter;
     480                scroll;
    482481
    483482            event = event || window.event;
    … …  
    491490            // and don't close it unless the target was
    492491            // the div.back button
    493             if ( $( event.target ).is( '.theme-backdrop' ) || $( event.target ).is( '.close' ) || event.keyCode === 27 ) {
     492            if ( $( event.target ).is( '.close' ) || event.keyCode === 27 ) {
    494493
    495494                // Add a temporary closing class while overlay fades out
    … …  
    497496
    498497                // With a quick fade out animation
    499                 this.$el.fadeOut( 130, function() {
     498                this.$el.fadeOut( 1, function() {
    500499                    // Clicking outside the modal box closes the overlay
    501500                    $( 'body' ).removeClass( 'closing-overlay' );
    … …  
    505504                    // Get scroll position to avoid jumping to the top
    506505                    scroll = document.body.scrollTop;
    507 
    508                     // Clean the url structure
    509                     if ( author = wp.themes.Collection.prototype.currentQuery.request.author ) {
    510                         wp.themes.router.navigate( wp.themes.router.baseUrl( 'author/' + author ) );
    511                         wp.themes.utils.title( author );
    512                     }
    513                     else if ( search = wp.themes.Collection.prototype.currentQuery.request.search ) {
    514                         wp.themes.router.navigate( wp.themes.router.baseUrl( wp.themes.router.searchPath + search ) );
    515                         wp.themes.utils.title( search );
    516                     }
    517                     else if ( tags = wp.themes.view.Installer.prototype.filtersChecked() ) {
    518                         wp.themes.router.navigate( wp.themes.router.baseUrl( 'tags/' + tags.join( '+' ) ) );
    519                         wp.themes.utils.title( _.each( tags, function( tag, i ) {
    520                             tags[ i ] = $( 'label[for="filter-id-' + tag + '"]' ).text();
    521                         }).join( ', ' ) );
    522                     }
    523                     else if ( sorter = $( '.filter-links .current' ) ) {
    524                         if ( ! sorter.length ) {
    525                             sorter = $( '.filter-links [data-sort="featured"]' );
    526                             args   = { trigger: true };
    527                         }
    528                         wp.themes.router.navigate( wp.themes.router.baseUrl( wp.themes.router.browsePath + sorter.data( 'sort' ) ), args );
    529                         wp.themes.utils.title( sorter.text() );
    530                     }
    531506
    532507                    // Restore scroll position
    … …  
    538513                    }
    539514                });
     515            }
     516        },
     517
     518        // Performs the actions to effectively close
     519        // the theme details overlay
     520        closeOverlay: function() {
     521            var args = {},
     522                author, search, tags, sorter;
     523
     524            $( 'body' ).removeClass( 'modal-open' );
     525            this.remove();
     526            this.unbind();
     527            this.trigger( 'theme:collapse' );
     528
     529            // Clean the url structure
     530            if ( author = wp.themes.Collection.prototype.currentQuery.request.author ) {
     531                wp.themes.router.navigate( wp.themes.router.baseUrl( 'author/' + author ) );
     532                wp.themes.utils.title( author );
     533            }
     534            else if ( search = wp.themes.Collection.prototype.currentQuery.request.search ) {
     535                wp.themes.router.navigate( wp.themes.router.baseUrl( wp.themes.router.searchPath + search ) );
     536                wp.themes.utils.title( search );
     537            }
     538            else if ( tags = wp.themes.view.Installer.prototype.filtersChecked() ) {
     539                wp.themes.router.navigate( wp.themes.router.baseUrl( 'tags/' + tags.join( '+' ) ) );
     540                wp.themes.utils.title( _.each( tags, function( tag, i ) {
     541                    tags[ i ] = $( 'label[for="filter-id-' + tag + '"]' ).text();
     542                }).join( ', ' ) );
     543            }
     544            else if ( sorter = $( '.filter-links .current' ) ) {
     545                if ( ! sorter.length ) {
     546                    sorter = $( '.filter-links [data-sort="featured"]' );
     547                    args   = { trigger: true };
     548                }
     549                wp.themes.router.navigate( wp.themes.router.baseUrl( wp.themes.router.browsePath + sorter.data( 'sort' ) ), args );
     550                wp.themes.utils.title( sorter.text() );
    540551            }
    541552        }

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/style.css

    r1406 r1409  
    1515}
    1616
    17 body.modal-open {
    18     overflow: hidden;
    19 }
    20 
    2117p {
    2218    margin-bottom: 1.5em;
    … …  
    3127.screen-reader-text {
    3228    clip: rect(1px, 1px, 1px, 1px);
     29    height: 1px;
     30    overflow: hidden;
    3331    position: absolute !important;
     32    width: 1px;
    3433}
    3534
    … …  
    7170}
    7271
    73 /* assorted overrides */
    74 #headline h2 {
    75     margin-bottom: 16px;
    76 }
     72/* Regular Content. */
     73h2 {
     74    font-size: 28px;
     75    margin-bottom: 10px;
     76}
     77
     78ul, ol {
     79    margin: 0 0 22px 0;
     80    padding-left: 26px;
     81}
     82
     83.type-page {
     84    margin: 30px auto;
     85}
     86
     87.entry-title {
     88    font-size: 36px;
     89    font-weight: 300;
     90    line-height: 1.3;
     91    margin-bottom: 20px;
     92}
     93
     94.entry-content {
     95    font-size: 16px;
     96    line-height: 1.6;
     97}
     98
     99.entry-content p {
     100    margin: 0 0 22px 0;
     101}
     102
     103/*------------------------------------------------------------------------------
     104  16.0 - Themes
     105------------------------------------------------------------------------------*/
    77106
    78107.wrap {
    79108    box-sizing: border-box;
     109    margin-left: auto;
     110    margin-right: auto;
     111    max-width: 960px;
     112    padding: 0 10px 100px;
     113    position: relative;
     114}
     115
     116.theme-browser .themes {
    80117    clear: both;
    81     margin: 0 auto;
    82     max-width: 960px;
    83     padding: 0 10px;
    84 }
    85 
    86 .theme-overlay .theme-backdrop {
    87     position: fixed;
    88 }
    89 
    90 .theme-overlay .theme-wrap {
    91     left: 30px;
    92     margin: 0 auto;
    93     max-width: 1290px;
    94     -webkit-overflow-scrolling: touch;
    95     top: 3%;
    96 }
    97 
    98 .admin-bar .theme-overlay .theme-wrap {
    99     top: calc(3% + 32px);
    100 }
    101 
    102 .theme-browser .themes {
    103     padding: 0;
    104 }
    105 body:not(.single) .theme-browser .themes:not(:empty) {
    106118    font-size: 0;
    107     padding: 0 0 100px;
    108 }
     119}
     120
     121.modal-open .wp-filter,
     122.modal-open .rendered .themes {
     123    display: none;
     124}
     125
     126/**
     127 * Main theme element
     128 * (has flexible margins)
     129 */
    109130.theme-browser .theme {
    110     display: inline-block;
    111     float: none;
    112 }
     131    border: 1px solid #dedede;
     132    -webkit-box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
     133    box-shadow:         0 1px 1px -1px rgba(0,0,0,0.1);
     134    box-sizing: border-box;
     135    cursor: pointer;
     136    display: inline-block;
     137    margin: 0 4% 4% 0;
     138    position: relative;
     139    width: 30.4%;
     140    width: -webkit-calc(92% / 3);
     141    width:         calc(92% / 3);
     142}
     143
     144.ie8 .theme-browser .theme {
     145    width: 30%;
     146    margin: 0 3% 4% 0;
     147}
     148
     149.theme-browser .theme:nth-child(3n) {
     150    margin-right: 0;
     151}
     152
    113153.theme-browser .theme:hover,
    114154.theme-browser .theme:focus {
    … …  
    116156    -webkit-box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
    117157    box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
     158    cursor: pointer;
     159}
     160
     161.theme-browser .theme:focus {
     162    border-color: #5b9dd9;
     163    -webkit-box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
     164    box-shadow:         0 0 2px rgba( 30, 140, 190, 0.8 );
     165}
     166
     167.theme-browser .theme .entry-title {
     168    background: #fff;
     169    background: rgba(255,255,255,0.65);
     170    -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
     171    box-shadow:         inset 0 1px 0 rgba(0,0,0,0.1);
     172    font-size: 15px;
     173    font-weight: 600;
     174    height: 18px;
     175    margin: 0;
     176    overflow: hidden;
     177    padding: 15px;
     178    text-overflow: ellipsis;
     179    white-space: nowrap;
     180}
     181
     182/* Activate and Customize buttons, shown on hover and focus */
     183.theme-browser .theme .theme-actions {
     184    background: rgba(244, 244, 244, 0.7);
     185    bottom: 0;
     186    border-left: 1px solid rgba(0,0,0,0.05);
     187    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
     188    height: 38px;
     189    opacity: 0;
     190    padding: 9px 10px 0 10px;
     191    position: absolute;
     192    right: 0;
     193    -webkit-transition: opacity 0.1s ease-in-out;
     194    transition:         opacity 0.1s ease-in-out;
     195}
     196
     197.theme-browser .theme:hover .theme-actions,
     198.theme-browser .theme.focus .theme-actions,
     199.theme-browser .theme:focus .theme-actions {
     200    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
     201    opacity: 1;
     202}
     203
     204/**
     205 * Theme Screenshot
     206 *
     207 * Has a fixed aspect ratio of 1.5 to 1 regardless of screenshot size
     208 * It is also responsive.
     209 */
     210.theme-browser .theme .theme-screenshot {
     211    display: block;
     212    overflow: hidden;
     213    position: relative;
     214    -webkit-transition: opacity 0.2s ease-in-out;
     215    transition:         opacity 0.2s ease-in-out;
     216}
     217
     218.theme-browser .theme .theme-screenshot:after {
     219    content: '';
     220    display: block;
     221    padding-top: 66.66666%; /* using a 3/2 aspect ratio */
     222}
     223
     224.theme-browser .theme:hover .theme-screenshot,
     225.theme-browser .theme:focus .theme-screenshot {
     226    background: #fff;
     227}
     228
     229.theme-browser .theme .theme-screenshot img {
     230    height: auto;
     231    left: 0;
     232    position: absolute;
     233    top: 0;
     234    -webkit-transition: opacity 0.2s ease-in-out;
     235    transition:         opacity 0.2s ease-in-out;
     236    width: 100%;
    118237}
    119238
    … …  
    123242}
    124243
     244.theme-browser .theme .more-details {
     245    background: #23282d;
     246    background: rgba(0,0,0,0.7);
     247    border-radius: 3px;
     248    color: #fff;
     249    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
     250    font-size: 15px;
     251    -webkit-font-smoothing: antialiased;
     252    font-weight: 600;
     253    left: 25%;
     254    opacity: 0;
     255    padding: 15px 12px;
     256    position: absolute;
     257    right: 25%;
     258    text-align: center;
     259    text-shadow: 0 1px 0 rgba(0,0,0,0.6);
     260    top: 35%;
     261    -webkit-transition: opacity 0.1s ease-in-out;
     262    transition:         opacity 0.1s ease-in-out;
     263}
     264
     265/* Current theme needs to have its action always on view */
     266.theme-browser .theme.active:focus .theme-actions {
     267    display: block;
     268}
     269
    125270.theme-browser .theme:hover .more-details,
    126271.theme-browser .theme:focus .more-details,
    127272.theme-browser .theme .more-details:focus {
     273    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    128274    opacity: 1;
    129275}
    130276
    131 .theme-browser .no-themes {
    132     margin: 100px 0 150px;
     277.theme-browser .theme .theme-author {
     278    background: #23282d;
     279    color: #eee;
     280    display: none;
     281    font-size: 14px;
     282    margin: 0 10px;
     283    padding: 5px 10px;
     284    position: absolute;
     285    bottom: 56px;
     286}
     287
     288/* Displays the author name on Index, if the search is preceded by `author:`. */
     289.theme-browser .theme.display-author .theme-author,
     290body.author .theme-browser .theme .theme-author  {
     291    display: block;
     292}
     293
     294.theme-browser .theme.display-author .theme-author a {
     295    color: inherit;
     296    text-decoration: none;
     297}
     298
     299/* Single Theme Navigation */
     300.theme-navigation {
     301    background: #fff;
     302    border: 1px solid #e5e5e5;
     303    box-sizing: border-box;
     304    -webkit-box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.04 );
     305    box-shadow:         0 1px 1px rgba( 0, 0, 0, 0.04 );
     306    margin: 20px 0 25px;
     307}
     308
     309.theme-navigation .post-navigation {
     310    float: right;
     311    width: 120px;
     312}
     313
     314.theme-navigation .close {
     315    background-color: transparent;
     316    border: 0;
     317    color: #21759b;
     318    cursor: pointer;
     319    display: inline-block;
     320    font-size: 14px;
     321    font-weight: 700;
     322    padding: 19px 15px;
     323    -webkit-transition: color .1s ease-in-out;
     324    transition:         color .1s ease-in-out;
     325}
     326
     327.theme-navigation a.close {
     328    padding: 16.5px 15px;
     329}
     330
     331.theme-navigation .close:before {
     332    content: '\2190';
     333    margin-right: 5px;
     334}
     335
     336.theme-navigation .close:hover,
     337.theme-navigation .close:active {
     338    color: #d54e21;
     339}
     340
     341.theme-navigation .nav-links a,
     342.theme-navigation .right,
     343.theme-navigation .left {
     344    border: 0;
     345    background-color: transparent;
     346    border: 0;
     347    border-left: 1px solid #ddd;
     348    color: #777;
     349    cursor: pointer;
     350    float: left;
     351    height: 56px;
     352    text-align: center;
     353    -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
     354    transition:         color .1s ease-in-out, background .1s ease-in-out;
     355    width: 59px;
     356}
     357
     358.theme-navigation .nav-links a:before,
     359.theme-navigation .right:before,
     360.theme-navigation .left:before {
     361    font: 400 20px/2.6 dashicons !important;
     362    text-decoration: inherit;
     363    -webkit-font-smoothing: antialiased;
     364}
     365
     366.theme-navigation .nav-links a:hover,
     367.theme-navigation .nav-links a:focus,
     368.theme-navigation .right:focus,
     369.theme-navigation .right:hover,
     370.theme-navigation .left:focus,
     371.theme-navigation .left:hover {
     372    background: #ddd;
     373    border-color: #ccc;
     374    color: #000;
     375}
     376
     377.theme-navigation .right:focus,
     378.theme-navigation .left:focus {
     379    -webkit-box-shadow: none;
     380    box-shadow:         none;
     381    outline: none;
     382}
     383
     384.theme-navigation .nav-previous a:before,
     385.theme-navigation .left:before,
     386.rtl .theme-navigation .right:before {
     387    content: '\f341';
     388}
     389
     390.theme-navigation .nav-next a:before,
     391.theme-navigation .right:before,
     392.rtl .theme-navigation .left:before {
     393    content: '\f345';
     394}
     395
     396.theme-navigation .left.disabled,
     397.theme-navigation .right.disabled,
     398.theme-navigation .left.disabled:hover,
     399.theme-navigation .right.disabled:hover {
     400    background: inherit;
     401    color: #ccc;
     402    cursor: inherit;
     403}
     404
     405/* Single Theme Body */
     406.theme-wrap {
     407    background: #fff;
     408    border: 1px solid #e5e5e5;
     409    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
     410    box-shadow:         0 1px 1px rgba(0, 0, 0, 0.04);
     411    font-size: 10px;
     412    -webkit-overflow-scrolling: touch;
    133413}
    134414
    135415.theme-wrap .theme-about {
    136     bottom: 0;
    137 }
    138 
    139 .theme-wrap .theme-about .theme-info {
     416    padding: 2% 4%;
     417}
     418
     419.theme-wrap .theme-name {
     420    color: #222;
     421    display: inline-block;
     422}
     423
     424.theme-wrap .theme-author {
     425    border: none;
     426    color: #686868;
     427    display: inline-block;
     428    font-style: italic;
     429    margin: 0 5px;
     430}
     431
     432.theme-wrap .theme-actions {
     433    margin: 0 0 1.5em;
     434    text-align: center;
     435}
     436
     437.theme-wrap .theme-actions a {
     438    height: 36px;
     439    padding: 4px 10px;
     440    width: 48%;
     441}
     442
     443.ie8 .theme-wrap .theme-actions {
     444    border: 1px solid #eee;
     445}
     446
     447.theme-wrap .theme-meta-info .updated {
     448    margin: 0 0 0.5em;
     449}
     450
     451.theme-wrap .theme-meta-info a:after {
     452    content: '\2192';
     453    margin-left: 5px;
     454}
     455
     456/**
     457 * Theme Screenshots gallery
     458 */
     459.theme-wrap .theme-screenshots {
    140460    float: left;
     461    margin: 0 30px 0 0;
     462    width: 55%;
     463    max-width: 880px;
     464    text-align: center;
     465}
     466
     467/* First screenshot, shown big */
     468.theme-wrap .screenshot {
     469    border: 1px solid #fff;
     470    -webkit-box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.2 );
     471    box-shadow:         0 0 0 1px rgba( 0, 0, 0, 0.2 );
     472    box-sizing: border-box;
     473    overflow: hidden;
     474    position: relative;
     475}
     476
     477.theme-wrap .screenshot:after {
     478    content: '';
     479    display: block;
     480    padding-top: 75%; /* using a 4/3 aspect ratio */
     481}
     482
     483.theme-wrap .screenshot img {
     484    height: auto;
     485    position: absolute;
     486    left: 0;
     487    top: 0;
     488    vertical-align: middle;
     489    width: 100%;
     490}
     491
     492.theme-wrap .screenshot.selected {
     493    background: transparent;
     494    border: 2px solid #00a0d2;
     495}
     496
     497.theme-wrap .screenshot.selected img {
     498    opacity: 0.8;
     499}
     500
     501/* No screenshot placeholder */
     502.theme-browser .theme .theme-screenshot.blank,
     503.theme-wrap .screenshot.blank {
     504    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYGWO8d+/efwYkoKioiMRjYGBC4WHhUK6A8T8QIJt8//59ZC493AAAQssKpBK4F5AAAAAASUVORK5CYII=);
     505}
     506
     507/**
     508 * Theme heading information
     509 */
     510.theme-wrap .theme-info {
    141511    width: calc(70% - 30px);
     512    float: left;
    142513}
    143514
    … …  
    154525}
    155526
    156 .theme-wrap .theme-name {
    157     display: inline-block;
    158 }
    159 
    160 .theme-wrap .theme-actions {
    161     background: none;
    162     border: none;
    163     padding: 0;
    164     position: relative;
    165     text-align: center;
    166     z-index: auto;
    167 }
    168 
    169 .theme-wrap .theme-actions a {
    170     height: 36px;
    171     padding: 4px 10px;
    172     width: 45%;
    173 }
    174 
    175 .theme-wrap .theme-meta-info {
    176     margin: 1.5em 0 0;
    177 }
    178 
    179 .theme-wrap .theme-meta-info .updated {
    180     margin: 0 0 0.5em;
    181 }
    182 
    183 .theme-wrap .theme-meta-info a:after {
    184     content: '\2192';
    185     margin-left: 5px;
    186 }
    187 
    188 .theme-overlay .theme-description,
    189 .theme-overlay .theme-tags {
    190     margin: 0;
    191     padding: 0;
     527.theme-wrap .theme-description {
     528    color: #555;
     529    font-size: 15px;
     530    font-weight: 400;
     531    line-height: 1.5;
     532}
     533
     534.theme-wrap .theme-tags {
     535    font-size: 13px;
     536}
     537
     538.theme-wrap .theme-downloads .total-downloads {
     539    color: #555;
     540    font-size: 14px;
     541    font-weight: 400;
     542    line-height: 1.5;
     543    margin: 1.5em 0 0 0;
    192544}
    193545
    … …  
    203555.theme-wrap .theme-devs li {
    204556    line-height: 1.5;
    205 }
    206 .theme-wrap .theme-ratings .rating {
    207     margin: 0 0 1.5em;
    208 }
    209 .theme-wrap .theme-ratings .star-holder,
    210 .theme-wrap .theme-ratings .description {
    211     display: inline-block;
    212 }
    213 .theme-wrap .theme-ratings .description {
    214     color: #aa9;
    215     font-style: italic;
    216     margin: 0 5px;
    217     vertical-align: text-bottom;
    218 }
    219 .theme-wrap .theme-ratings ul {
    220     list-style-type: none;
    221     margin: 0 0 1.5em;
    222     padding: 0;
    223 }
    224 .theme-wrap .theme-ratings .counter-container,
    225 .theme-wrap .theme-ratings .counter-container a {
    226     display: inline-block;
    227     width: 100%;
    228 }
    229 .theme-wrap .theme-ratings .counter-label,
    230 .theme-wrap .theme-ratings .counter-count {
    231     line-height: 1.75;
    232 }
    233 .theme-wrap .theme-ratings .counter-label {
    234     float: left;
    235     margin-right: 5px;
    236 }
    237 .theme-wrap .theme-ratings .counter-back,
    238 .theme-wrap .theme-ratings .counter-bar {
    239     float: left;
    240     height: 17px;
    241 }
    242 .theme-wrap .theme-ratings .counter-back {
    243     background-color: #ececec;
    244     width: 70%;
    245     width: -webkit-calc(100% - 60px);
    246     width: calc(100% - 60px);
    247 }
    248 .theme-wrap .theme-ratings .counter-bar {
    249     background-color: #fddb5a;
    250 }
    251 .theme-wrap .theme-ratings .counter-count {
    252     float: left;
    253     margin-left: 5px;
    254 }
    255 
    256 .theme-wrap .theme-tags {
    257     border: none;
    258557}
    259558
    … …  
    267566}
    268567
    269 /* Single View */
    270 .single .theme-wrap {
     568
     569/*------------------------------------------------------------------------------
     570  16.2 - Install Themes
     571------------------------------------------------------------------------------*/
     572
     573.no-themes {
     574    clear: both;
     575    color: #666;
     576    font-size: 18px;
     577    font-style: normal;
     578    margin: 0;
     579    padding: 100px 0 0;
     580    text-align: center;
     581    display: none;
     582}
     583
     584.no-results .no-themes {
     585    display: block;
     586}
     587
     588.theme-browser .no-themes {
     589    margin: 100px 0 150px;
     590}
     591
     592
     593/* Ratings */
     594.rating {
     595    margin: 0 0 1.5em;
     596    min-height: 26px;
     597}
     598
     599.rating span[class]:before {
     600    color: #e6b800;
     601    content: "\f154";
     602    display: inline-block;
     603    -webkit-font-smoothing: antialiased;
     604    font: normal 20px/1 'dashicons';
     605    vertical-align: top;
     606}
     607/* Half stars */
     608.rating-10 span.one:before,
     609.rating-30 span.two:before,
     610.rating-50 span.three:before,
     611.rating-70 span.four:before,
     612.rating-90 span.five:before {
     613    content: "\f459";
     614}
     615/* Full stars */
     616.rating-20 span.one:before {
     617    content: "\f155";
     618}
     619.rating-30 span.one:before,
     620.rating-40 span.one:before,
     621.rating-40 span.two:before {
     622    content: "\f155";
     623}
     624.rating-50 span.one:before,
     625.rating-50 span.two:before,
     626.rating-60 span.one:before,
     627.rating-60 span.two:before,
     628.rating-60 span.three:before {
     629    content: "\f155";
     630}
     631.rating-70 span.one:before,
     632.rating-70 span.two:before,
     633.rating-70 span.three:before,
     634.rating-80 span.one:before,
     635.rating-80 span.two:before,
     636.rating-80 span.three:before,
     637.rating-80 span.four:before {
     638    content: "\f155";
     639}
     640.rating-90 span.one:before,
     641.rating-90 span.two:before,
     642.rating-90 span.three:before,
     643.rating-90 span.four:before,
     644.rating-100 span.one:before,
     645.rating-100 span.two:before,
     646.rating-100 span.three:before,
     647.rating-100 span.four:before,
     648.rating-100 span.five:before {
     649    content: "\f155";
     650}
     651.rating .ratings {
     652    display: block;
     653    line-height: 20px;
     654    color: #999;
     655}
     656
     657.theme-ratings .description {
     658    color: #aa9;
     659    display: inline-block;
     660    font-style: italic;
     661    margin: 0 5px;
     662    vertical-align: text-bottom;
     663}
     664.theme-ratings ul {
     665    list-style-type: none;
     666    padding: 0;
     667}
     668.theme-ratings .counter-container,
     669.theme-ratings .counter-container a {
     670    display: inline-block;
     671    width: 100%;
     672}
     673.theme-ratings .counter-label,
     674.theme-ratings .counter-count {
     675    line-height: 1.75;
     676}
     677.theme-ratings .counter-label {
     678    float: left;
     679    margin-right: 5px;
     680    min-width: 32px;
     681}
     682.theme-ratings .counter-back,
     683.theme-ratings .counter-bar {
     684    float: left;
     685    height: 17px;
     686}
     687.theme-ratings .counter-back {
     688    background-color: #ececec;
     689    width: 70%;
     690    width: -webkit-calc(100% - 60px);
     691    width: calc(100% - 60px);
     692}
     693.theme-ratings .counter-bar {
     694    background-color: #fddb5a;
     695}
     696.theme-ratings .counter-count {
     697    float: left;
     698    margin-left: 5px;
     699}
     700
     701/*------------------------------------------------------------------------------
     702  23.0 - Full Overlay w/ Sidebar
     703------------------------------------------------------------------------------*/
     704
     705body.full-overlay-active {
     706    overflow: hidden;
     707}
     708
     709.wp-full-overlay {
     710    background: transparent;
     711    z-index: 500000;
     712    position: fixed;
     713    overflow: visible;
     714    top: 0;
     715    bottom: 0;
     716    left: 0;
     717    right: 0;
     718    height: 100%;
     719    min-width: 0;
     720}
     721
     722.wp-full-overlay-sidebar {
     723    border: 1px solid #ddd;
     724    box-sizing: border-box;
     725    position: fixed;
     726    width: 300px;
     727    height: 100%;
     728    top: 0;
     729    bottom: 0;
     730    left: 0;
     731    padding: 0;
     732    margin: 0;
     733    z-index: 10;
     734    background: #eee;
     735}
     736
     737.wp-full-overlay.collapsed .wp-full-overlay-sidebar {
     738    overflow: visible;
     739}
     740
     741.wp-full-overlay.expanded {
     742    margin-left: 300px;
     743}
     744
     745.wp-full-overlay.collapsed .wp-full-overlay-sidebar {
     746    margin-left: -300px;
     747}
     748
     749.wp-full-overlay-sidebar:after {
     750    content: '';
     751    display: block;
     752    position: absolute;
     753    top: 0;
     754    bottom: 0;
     755    right: 0;
     756    width: 3px;
     757    z-index: 1000;
     758}
     759
     760.wp-full-overlay-main {
     761    position: absolute;
     762    left: 0;
     763    right: 0;
     764    top: 0;
     765    bottom: 0;
     766    height: 100%;
     767}
     768
     769.wp-full-overlay-sidebar .wp-full-overlay-header {
     770    position: absolute;
     771    left: 0;
     772    right: 0;
     773    height: 45px;
     774    padding: 0 15px;
     775    line-height: 45px;
     776    z-index: 10;
     777    margin: 0;
     778    border-top: none;
     779    -webkit-box-shadow: none;
     780    box-shadow: none;
     781}
     782
     783.wp-full-overlay-sidebar .wp-full-overlay-header a.back {
     784    margin-top: 9px;
     785}
     786
     787.wp-full-overlay-sidebar .wp-full-overlay-footer {
     788    bottom: 0;
     789    border-bottom: none;
     790    border-top: none;
     791    -webkit-box-shadow: none;
     792    box-shadow: none;
     793}
     794
     795.wp-full-overlay-sidebar .wp-full-overlay-sidebar-content {
     796    position: absolute;
     797    top: 45px;
     798    bottom: 45px;
     799    left: 0;
     800    right: 0;
     801    overflow: auto;
     802}
     803
     804/* Close & Navigation Links */
     805.theme-install-overlay .wp-full-overlay-sidebar .wp-full-overlay-header {
     806    padding: 0;
     807}
     808
     809.theme-install-overlay .close-full-overlay,
     810.theme-install-overlay .previous-theme,
     811.theme-install-overlay .next-theme {
     812    display: block;
     813    position: relative;
     814    float: left;
     815    width: 45px;
     816    height: 45px;
     817    padding-right: 2px;
     818    background: #eee;
     819    border-right: 1px solid #ddd;
     820    color: #444;
     821    cursor: pointer;
     822    text-decoration: none;
     823    -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
     824    transition:         color .1s ease-in-out, background .1s ease-in-out;
     825}
     826
     827.theme-install-overlay .close-full-overlay:hover,
     828.theme-install-overlay .close-full-overlay:focus,
     829.theme-install-overlay .previous-theme:hover,
     830.theme-install-overlay .previous-theme:focus,
     831.theme-install-overlay .next-theme:hover,
     832.theme-install-overlay .next-theme:focus {
     833    background: #ddd;
     834    border-color: #ccc;
     835    color: #000;
     836    outline: none;
     837    -webkit-box-shadow: none;
     838    box-shadow: none;
     839}
     840
     841.theme-install-overlay .close-full-overlay:before {
     842    font: normal 22px/1 dashicons;
     843    content: "\f335";
     844    position: relative;
     845    top: 7px;
     846    left: 13px;
     847}
     848
     849.theme-install-overlay .previous-theme:before {
     850    font: normal 20px/1 dashicons;
     851    content: "\f341";
     852    position: relative;
     853    top: 6px;
     854    left: 14px;
     855}
     856
     857.theme-install-overlay .next-theme:before {
     858    font: normal 20px/1 dashicons;
     859    content: "\f345";
     860    position: relative;
     861    top: 6px;
     862    left: 13px;
     863}
     864
     865.theme-install-overlay .previous-theme.disabled,
     866.theme-install-overlay .next-theme.disabled,
     867.theme-install-overlay .previous-theme.disabled:hover,
     868.theme-install-overlay .previous-theme.disabled:focus,
     869.theme-install-overlay .next-theme.disabled:hover,
     870.theme-install-overlay .next-theme.disabled:focus {
     871    color: #bbb;
     872    background: #eee;
     873    cursor: default;
     874    pointer-events: none;
     875}
     876
     877.rtl .theme-install-overlay .previous-theme:before {
     878    content: "\f345";
     879}
     880
     881.rtl .theme-install-overlay .next-theme:before {
     882    content: "\f341";
     883}
     884
     885/* Collapse Button */
     886.wp-full-overlay a.collapse-sidebar {
     887    position: absolute;
     888    bottom: 12px;
     889    left: 0;
     890    z-index: 50;
     891    display: block;
     892    width: 19px;
     893    height: 19px;
     894    margin-left: 15px;
     895    padding: 0;
     896    -webkit-border-radius: 50%;
     897    border-radius: 50%;
     898    color: #777;
     899    text-decoration: none;
     900}
     901
     902.wp-full-overlay a.collapse-sidebar:hover {
     903    color: #0073aa;
     904}
     905
     906.wp-full-overlay.collapsed .collapse-sidebar {
     907    position: absolute;
     908    left: 100%;
     909}
     910
     911.wp-full-overlay .collapse-sidebar-arrow {
     912    position: static;
     913    margin-top: 0;
     914    margin-left: 0;
     915    display: block;
     916    width: auto;
     917    height: auto;
     918    background: none;
     919}
     920
     921.wp-full-overlay .collapse-sidebar-arrow:before {
     922    -webkit-border-radius: 50%;
     923    border-radius: 50%;
     924    float: left;
     925    content: "\f148";
     926    background: #eee;
     927    font: normal 20px/1 'dashicons';
     928    speak: none;
     929    display: block;
     930    padding: 0;
     931    text-indent: 0;
     932    text-align: center;
     933    position: relative;
     934    -webkit-font-smoothing: antialiased;
     935    -moz-osx-font-smoothing: grayscale;
     936    text-decoration: none !important;
     937}
     938
     939.wp-full-overlay.collapsed .collapse-sidebar-arrow:before,
     940.rtl .wp-full-overlay .collapse-sidebar-arrow:before {
     941    -webkit-transform: rotate(180deg);
     942    -ms-transform:     rotate(180deg);
     943    transform:         rotate(180deg);
     944}
     945
     946.rtl .wp-full-overlay.collapsed .collapse-sidebar-arrow:before {
     947    -webkit-transform: none;
     948    -ms-transform:     none;
     949    transform:         none;
     950}
     951
     952.wp-full-overlay.collapsed .collapse-sidebar-arrow {
     953    background-position: -1px -109px;
     954}
     955
     956.wp-full-overlay .collapse-sidebar-label {
     957    position: absolute;
     958    left: 100%;
     959    line-height: 20px;
     960    margin-left: 10px;
     961}
     962
     963.wp-full-overlay.collapsed .collapse-sidebar-label {
     964    display: none;
     965}
     966
     967/* Animations */
     968.wp-full-overlay,
     969.wp-full-overlay-sidebar,
     970.wp-full-overlay .collapse-sidebar,
     971.wp-full-overlay-main {
     972    -webkit-transition-property: left, right, top, bottom, width, margin;
     973    transition-property:         left, right, top, bottom, width, margin;
     974    -webkit-transition-duration: 0.2s;
     975    transition-duration:         0.2s;
     976}
     977
     978/*------------------------------------------------------------------------------
     979  24.0 - Customize Loader
     980------------------------------------------------------------------------------*/
     981
     982.no-customize-support .hide-if-no-customize,
     983.customize-support .hide-if-customize,
     984.no-customize-support.wp-core-ui .hide-if-no-customize,
     985.no-customize-support .wp-core-ui .hide-if-no-customize,
     986.customize-support.wp-core-ui .hide-if-customize,
     987.customize-support .wp-core-ui .hide-if-customize {
     988    display: none;
     989}
     990
     991#customize-container {
     992    display: none;
    271993    background: #fff;
    272     border: 1px solid #e5e5e5;
    273     box-shadow: 0 1px 1px rgba(0,0,0,0.04);
    274     margin-bottom: 3%;
     994    z-index: 500000;
     995    position: fixed;
     996    overflow: visible;
     997    top: 0;
     998    bottom: 0;
     999    left: 0;
     1000    right: 0;
     1001    height: 100%;
     1002}
     1003
     1004.customize-active #customize-container {
     1005    display: block;
     1006}
     1007
     1008.customize-loading #customize-container iframe {
     1009    opacity: 0;
     1010}
     1011
     1012.customize-loading #customize-container {
     1013    background: #fff url(/wp-admin/images/spinner.gif) no-repeat fixed center center;
     1014    -webkit-background-size: 20px 20px;
     1015    background-size: 20px 20px;
     1016}
     1017
     1018#customize-container iframe,
     1019.theme-install-overlay iframe {
     1020    height: 100%;
     1021    width: 100%;
     1022    z-index: 20;
     1023    -webkit-transition: opacity 0.3s;
     1024    transition: opacity 0.3s;
     1025}
     1026
     1027#customize-container .collapse-sidebar {
     1028    bottom: 16px;
     1029}
     1030
     1031#customize-controls {
     1032    margin-top: 0;
     1033}
     1034
     1035.theme-install-overlay {
     1036    display: none;
     1037}
     1038
     1039.theme-install-overlay.single-theme {
     1040    display: block;
     1041}
     1042
     1043.install-theme-info {
     1044    display: none;
     1045    padding: 10px 20px 60px;
     1046}
     1047
     1048.single-theme .install-theme-info {
     1049    padding-top: 15px;
     1050}
     1051
     1052.theme-install-overlay .install-theme-info {
     1053    display: block;
     1054}
     1055
     1056.install-theme-info .theme-install {
     1057    float: right;
     1058    margin-top: 18px;
     1059}
     1060
     1061.install-theme-info .theme-name {
     1062    font-size: 16px;
     1063    line-height: 24px;
     1064    margin-bottom: 0;
     1065    margin-top: 0;
     1066}
     1067
     1068.install-theme-info .theme-screenshot {
     1069    margin-top: 15px;
     1070    width: 258px;
     1071    border: 1px solid #ccc;
     1072}
     1073
     1074.install-theme-info .theme-details {
    2751075    overflow: hidden;
    276     padding: 2% 4%;
    277 }
    278 
    279 
    280 /**
    281  * Theme heading information
    282  */
    283 .single.single-repopackage .themes .theme-wrap {
    284     visibility: hidden;
    285 }
    286 .single .theme-wrap .current-label {
    287     background: #333;
    288     color: #fff;
    289     font-size: 11px;
    290     display: inline-block;
    291     padding: 2px 8px;
    292     -webkit-border-radius: 2px;
    293     border-radius: 2px;
    294     margin: 0 0 -10px;
    295     -webkit-user-select: none;
    296     -moz-user-select: none;
    297     -ms-user-select: none;
    298     user-select: none;
    299 }
    300 
    301 .single .theme-wrap .theme-name {
    302     color: #222;
    303     font-size: 32px;
    304     font-weight: 100;
    305     margin: 10px 0 0;
    306     line-height: 1.3;
    307 }
    308 
    309 .single .theme-wrap .theme-author {
    310     color: #686868;
    311     font-size: 16px;
    312     font-weight: 400;
    313     margin: 15px 0 25px;
    314 }
    315 
    316 .single .theme-wrap .theme-author a {
    317     text-decoration: none;
    318 }
    319 
    320 .single .theme-wrap .theme-description {
    321     color: #555;
    322     font-size: 15px;
    323     font-weight: 400;
    324     line-height: 1.5;
    325     margin: 30px 0 0 0;
    326 }
    327 
    328 .theme-wrap .theme-downloads .total-downloads {
    329     color: #555;
    330     font-size: 14px;
    331     font-weight: 400;
    332     line-height: 1.5;
    333     margin: 1.5em 0 0 0;
    334 }
    335 
    336 .single .theme-wrap .theme-tags {
    337     border-top: 3px solid #eee;
    338     color: #888;
    339     font-size: 13px;
    340     font-weight: 400;
    341     margin: 30px 0 0 0;
    342     padding-top: 20px;
    343 }
    344 
    345 .single .theme-wrap .theme-tags span {
    346     color: #444;
    347     font-weight: bold;
    348     margin-right: 5px;
    349 }
    350 
    351 .single .theme-wrap .screenshot {
    352     border: 1px solid #fff;
    353     box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
    354     box-sizing: border-box;
    355     position: relative;
    356 }
    357 
    358 .single .theme-wrap .screenshot img {
    359     height: auto;
    360     vertical-align: middle;
    361     width: 100%;
    362 }
    363 
    364 .ie8 .single .theme-wrap .theme-actions {
    365     border: 1px solid #eee;
     1076}
     1077
     1078.theme-details .theme-version {
     1079    margin: 15px 0;
     1080    float: left;
     1081}
     1082
     1083.theme-details .star-rating {
     1084    margin: 7px 0;
     1085    float: right;
     1086}
     1087
     1088.theme-details .theme-description {
     1089    float: left;
     1090    color: #777;
     1091    line-height: 20px;
     1092    max-width: 100%;
     1093}
     1094
     1095.theme-install-overlay .wp-full-overlay-header .theme-install {
     1096    float: right;
     1097    margin: 8px 10px 0 0;
     1098}
     1099
     1100.theme-install-overlay .wp-full-overlay-sidebar-content {
     1101    background: #fff;
     1102    border-top: 1px solid #ddd;
     1103    border-bottom: 1px solid #ddd;
     1104}
     1105
     1106.theme-install-overlay .wp-full-overlay-main {
     1107    background: #fff url(/wp-admin/images/spinner.gif) no-repeat center center;
     1108    -webkit-background-size: 20px 20px;
     1109    background-size: 20px 20px;
     1110}
     1111
     1112
     1113/* assorted overrides */
     1114#headline h2 {
     1115    margin-bottom: 16px;
    3661116}
    3671117
    … …  
    3831133}
    3841134
    385 #wordpress-org #pagebody p.intro {
    386     font-family: "Open Sans", Helvetica, Arial, "Liberation Sans", sans-serif;
    387     font-size: 25px;
    388 }
    389 
    390 
    391 /* TODO copy wp-admin/css/themes.css to here */
    392 
    393 /* Copied from wp-admin/css/common.css */
    394 
    3951135/* Filter bar */
    3961136.wp-filter {
    3971137    display: inline-block;
    3981138    position: relative;
    399     -webkit-box-sizing: border-box;
    400     -moz-box-sizing: border-box;
    4011139    box-sizing: border-box;
    4021140    margin: 20px 0 25px;
    … …  
    4041142    width: 100%;
    4051143    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
    406     box-shadow: 0 1px 1px rgba(0,0,0,0.04);
     1144    box-shadow:         0 1px 1px rgba(0,0,0,0.04);
    4071145    border: 1px solid #e5e5e5;
    4081146    background: #fff;
    … …  
    6851423    outline: none;
    6861424    -webkit-transition: 0.05s border-color ease-in-out;
    687     transition: 0.05s border-color ease-in-out;
     1425    transition:         0.05s border-color ease-in-out;
    6881426    border-radius: 0;
    6891427    margin: 0;
    … …  
    6931431    font-weight: 300;
    6941432    line-height: 1.5;
    695 }
    696 
    697 .theme-stats {
    698     border: 1px solid #eee;
    699     font-size: 14px;
    700     padding: 20px;
    7011433}
    7021434
    … …  
    7121444    border: 1px solid;
    7131445    -webkit-appearance: none;
    714     -webkit-border-radius: 3px;
    7151446    border-radius: 3px;
    7161447    white-space: nowrap;
    717     -webkit-box-sizing: border-box;
    718     -moz-box-sizing: border-box;
    7191448    box-sizing: border-box;
    7201449}
    … …  
    7231452    background: #2ea2cc;
    7241453    border-color: #0074a2;
    725     -webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5), 0 1px 0 rgba( 0, 0, 0, 0.15 );
    726     box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5 ), 0 1px 0 rgba( 0, 0, 0, 0.15 );
     1454    -webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5 ), 0 1px 0 rgba( 0, 0, 0, 0.15 );
     1455    box-shadow:         inset 0 1px 0 rgba( 120, 200, 230, 0.5 ), 0 1px 0 rgba( 0, 0, 0, 0.15 );
    7271456    color: #fff;
    7281457    text-decoration: none;
    … …  
    7361465    border-color: #0074a2;
    7371466    -webkit-box-shadow: inset 0 1px 0 rgba(120, 200, 230, 0.6);
    738     box-shadow: inset 0 1px 0 rgba(120, 200, 230, 0.6);
     1467    box-shadow:         inset 0 1px 0 rgba(120, 200, 230, 0.6);
    7391468    color: #fff;
    7401469}
    … …  
    7451474    background: #f7f7f7;
    7461475    -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(0, 0, 0, 0.08);
    747     box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(0, 0, 0, 0.08);
     1476    box-shadow:         inset 0 1px 0 #fff, 0 1px 0 rgba(0, 0, 0, 0.08);
    7481477    vertical-align: top;
    7491478}
    … …  
    7681497    list-style: none;
    7691498    margin: 0 auto;
     1499    max-width: 960px;
    7701500    padding: 10px 0;
    771     width: 960px;
    7721501}
    7731502
    … …  
    7801509}
    7811510
    782 #site-navigation.main-navigation a {
     1511.main-navigation a {
    7831512    color: #636363;
    7841513}
    7851514
    786 #site-navigation.main-navigation a:hover,
    787 #site-navigation.main-navigation a:focus {
     1515.main-navigation a:hover,
     1516.main-navigation a:focus {
    7881517    color: #2ea2cc;
    7891518}
    … …  
    7991528        width: 100%;
    8001529    }
    801 }
    802 
    803 /* Regular Content. */
    804 h2 {
    805     font-size: 28px;
    806     margin-bottom: 10px;
    807 }
    808 ul, ol {
    809     margin: 0 0 22px 0;
    810     padding-left: 26px;
    811 }
    812 
    813 .type-page {
    814     margin: 30px auto;
    815 }
    816 
    817 .entry-title {
    818     font-size: 36px;
    819     font-weight: 300;
    820     line-height: 1.3;
    821     margin-bottom: 20px;
    822 }
    823 
    824 .entry-content {
    825     font-size: 16px;
    826     line-height: 1.6;
    827 }
    828 
    829 .entry-content p {
    830     margin: 0 0 22px 0;
    8311530}
    8321531
    … …  
    8751574    margin: 0 5px 0 -10px;
    8761575    vertical-align: middle;
    877 }
    878 
    879 /* Single Theme Footer */
    880 .theme-wrap .theme-footer {
    881     border-top: 1px solid #ddd;
    882     clear: both;
    883     margin: 25px -38px -19px;
    884     height: 48px;
    885 }
    886 
    887 .index-link {
    888     display: inline-block;
    889     font-size: 14px;
    890     font-weight: 700;
    891     padding: 13px 15px;
    892 }
    893 
    894 .index-link:before {
    895     content: '\2190';
    896     margin-right: 5px;
    897 }
    898 
    899 .post-navigation {
    900     float: right;
    901     width: 110px;
    902     height: 48px;
    903 }
    904 
    905 .post-navigation .nav-links a {
    906     border: 0;
    907     border-left: 1px solid #ddd;
    908     color: #777;
    909     float: left;
    910     height: 48px;
    911     text-align: center;
    912     -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
    913     transition: color .1s ease-in-out, background .1s ease-in-out;
    914     vertical-align: top;
    915     width: 54px;
    916 }
    917 
    918 .post-navigation .nav-links a:before {
    919     font: 400 20px/50px dashicons !important;
    920     text-decoration: inherit;
    921     -webkit-font-smoothing: antialiased;
    922 }
    923 
    924 .post-navigation .nav-links a:hover,
    925 .post-navigation .nav-links a:focus {
    926     background: #ddd;
    927     border-color: #ccc;
    928     color: #000;
    929 }
    930 .post-navigation .nav-previous a:before {
    931     content: '\f341';
    932 }
    933 
    934 .post-navigation .nav-next a:before {
    935     content: '\f345';
    9361576}
    9371577
    … …  
    9761616}
    9771617
    978 @media only screen and (min-width: 1640px) {
    979     .theme-browser .themes .theme {
    980         width: 30.6%;
    981         margin: 0 4% 4% 0;
    982     }
    983 
    984     .theme-browser .theme:nth-child(4n) {
    985         margin-right: 4%;
    986     }
    987 
    988     .theme-browser .theme:nth-child(3n) {
    989         margin-right: 0;
     1618/* =Media Queries
     1619-------------------------------------------------------------- */
     1620
     1621/**
     1622 * HiDPI Displays
     1623 */
     1624@media print,
     1625(-webkit-min-device-pixel-ratio: 1.25),
     1626(min-resolution: 120dppx) {
     1627    .wp-full-overlay .collapse-sidebar-arrow {
     1628        background-image: url(/wp-admin/images/arrows-2x.png);
     1629        -webkit-background-size: 15px 123px;
     1630        background-size: 15px 123px;
     1631    }
     1632
     1633    .spinner,
     1634    .customize-loading #customize-container,
     1635    .theme-install-overlay .wp-full-overlay-main {
     1636        background-image: url(/wp-admin/images/spinner-2x.gif);
     1637    }
     1638
     1639    .theme-install-overlay .wp-full-overlay-header .theme-install {
     1640        margin-top: 2px;
    9901641    }
    9911642}
    … …  
    10061657        margin: 10px 0;
    10071658    }
    1008 }
    1009 
    1010 @media only screen and (max-width: 960px) {
    1011 
     1659
     1660    .theme-browser .theme {
     1661        width: 47.5%;
     1662        margin-right: 0;
     1663    }
     1664
     1665    .theme-browser .theme:nth-child(even) {
     1666        margin-right: 0;
     1667    }
     1668
     1669    .theme-browser .theme:nth-child(odd) {
     1670        margin-right: 5%;
     1671    }
    10121672}
    10131673
    10141674@media only screen and (max-width: 782px) {
    1015     .theme-overlay .theme-wrap {
    1016         bottom: 3%;
    1017         left: 10px;
    1018         right: 10px;
     1675    .theme:hover .theme-actions,
     1676    .theme:focus .theme-actions,
     1677    .theme:hover .more-details,
     1678    .theme:focus .more-details {
     1679        display: none;
     1680    }
     1681
     1682    .theme-browser.rendered .theme:hover .theme-screenshot img,
     1683    .theme-browser.rendered .theme:focus .theme-screenshot img {
     1684        opacity: 1.0;
    10191685    }
    10201686
    … …  
    10361702    }
    10371703
    1038     .theme-wrap .theme-actions {
    1039         padding: 10px 0 5px;
    1040     }
    1041 
    10421704    .theme-wrap .theme-actions .button-primary {
    10431705        display: none;
    … …  
    10511713    }
    10521714
    1053     .theme-wrap .theme-ratings,
     1715    .theme-wrap .screenshot {
     1716        margin: 0 auto;
     1717        max-width: 571px;
     1718        width: 100%;
     1719    }
     1720
     1721    .theme-wrap .theme-support,
    10541722    .theme-wrap .theme-devs {
    10551723        display: inline-block;
    … …  
    10611729        margin-left: 5%;
    10621730    }
    1063 
    1064     .theme-install-overlay .wp-full-overlay-header .theme-install {
    1065         line-height: 26px;
    1066         margin-top: 8px;
     1731}
     1732
     1733@media only screen and (max-width: 650px) {
     1734    .theme-wrap .theme-update,
     1735    .theme-wrap .theme-description {
     1736        margin-left: 0;
     1737    }
     1738
     1739    .theme-wrap .theme-info {
     1740        width: 100%;
     1741    }
     1742
     1743    .theme-wrap .theme-author {
     1744        margin: 5px 0 15px 0;
     1745    }
     1746
     1747    .theme-wrap .current-label {
     1748        margin-top: 10px;
     1749        font-size: 13px;
    10671750    }
    10681751}
    10691752
    10701753@media only screen and (max-width: 480px) {
     1754    .theme-browser .theme {
     1755        width: 100%;
     1756        margin-right: 0;
     1757    }
     1758
     1759    .theme-browser .theme:nth-child(2n),
     1760    .theme-browser .theme:nth-child(3n) {
     1761        margin-right: 0;
     1762    }
     1763
    10711764    /* Align login info with site title. */
    10721765    #headline .login {
    … …  
    10941787    }
    10951788
    1096     .theme-overlay .theme-wrap,
    1097     .admin-bar .theme-overlay .theme-wrap {
    1098         bottom: 0;
    1099         left: 0;
    1100         right: 0;
    1101         top: 0;
    1102     }
    1103 
    11041789    .theme-browser .themes .theme {
    11051790        margin-right: 0;
     1791    }
     1792
     1793    .theme-wrap .theme-name {
     1794        display: block;
     1795        margin: 0;
    11061796    }
    11071797
    … …  
    11131803    }
    11141804
    1115     /* Keep ratings and dev links stacked until they have enough room. */
    1116     .theme-wrap .theme-devs,
    1117     .theme-wrap .theme-ratings {
     1805    /* Keep support and dev links stacked until they have enough room. */
     1806
     1807    .theme-wrap .theme-support,
     1808    .theme-wrap .theme-devs {
    11181809        margin: auto;
    11191810        width: 100%;

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/view-templates/theme-single.php

    r1383 r1409  
    11<script id="tmpl-theme-single" type="text/template">
    2     <div class="theme-backdrop"></div>
    3     <div class="theme-wrap">
    4         <div class="theme-header">
    5             <button class="close dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Close overlay' ); ?></span></button>
     2    <div class="theme-navigation">
     3        <button class="close"><?php _e( 'Return to Themes List', 'wporg-themes' ); ?></button>
     4        <div class="navigation post-navigation">
    65            <button class="left dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Show previous theme' ); ?></span></button>
    76            <button class="right dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Show next theme' ); ?></span></button>
    87        </div>
    9 
     8    </div>
     9    <div class="theme-wrap">
    1010        <div class="theme-about hentry" itemscope itemtype="http://schema.org/CreativeWork">
    1111            <# if ( data.is_outdated ) { #>
    … …  
    1515            <# } #>
    1616
     17            <div>
     18                <h3 class="theme-name entry-title" itemprop="name">{{{ data.name }}}</h3>
     19                <h4 class="theme-author"><?php printf( __( 'by %s' ), '<a href="https://wordpress.org/themes/author/{{ data.author.user_nicename }}/"><span class="author" itemprop="author">{{{ data.author.display_name }}}</span></a>' ); ?></h4>
     20            </div>
     21
    1722            <div class="theme-head">
    18                 <h3 class="theme-name entry-title" itemprop="name">{{{ data.name }}}</h3>
    19                 <h4 class="theme-author"><?php printf( __( 'By %s' ), '<a href="https://profiles.wordpress.org/{{ data.author.user_nicename }}"><span class="author" itemprop="author">{{{ data.author.display_name }}}</span></a>' ); ?></h4>
    20 
    21                 <div class="theme-actions">
    22                     <a href="{{{ data.preview_url }}}" class="button button-secondary"><?php _e( 'Preview' ); ?></a>
    23                     <a href="//downloads.wordpress.org/theme/{{ data.slug }}.{{ data.version }}.zip" class="button button-primary"><?php _e( 'Download' ); ?></a>
     23                <div class="theme-actions clear">
     24                    <a href="{{{ data.preview_url }}}" class="button button-secondary alignleft"><?php _e( 'Preview' ); ?></a>
     25                    <a href="//downloads.wordpress.org/theme/{{ data.slug }}.{{ data.version }}.zip" class="button button-primary alignright"><?php _e( 'Download' ); ?></a>
    2426                </div>
    2527
    … …  
    4042            <div class="theme-info">
    4143                <# if ( data.screenshot_url ) { #>
    42                 <div class="screenshot"><img src="{{ data.screenshot_url }}?w=798&strip=all" alt=""/></div>
     44                <div class="screenshot"><img src="{{ data.screenshot_url }}?w=571&strip=all" alt=""/></div>
    4345                <# } else { #>
    4446                <div class="screenshot blank"></div>
    … …  
    6365            <div class="theme-meta">
    6466                <div class="theme-ratings" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
    65                     <meta itemprop="itemReviewed" content="{{ data.name }}" />
    66                     <meta itemprop="ratingValue" content="{{ (data.rating/20).toFixed(1) }}"/>
    6767                    <meta itemprop="ratingCount" content="{{ data.num_ratings }}"/>
    6868                    <h4><?php _e( 'Ratings', 'wporg-themes' ); ?></h4>
     69
     70                    <# if ( data.rating ) { #>
     71                    <div class="rating rating-{{ Math.round( data.rating / 10 ) * 10 }}">
     72                        <span class="one"></span>
     73                        <span class="two"></span>
     74                        <span class="three"></span>
     75                        <span class="four"></span>
     76                        <span class="five"></span>
     77                        <p class="description"><?php printf( __( '%s out of 5 stars.', 'wporg-themes' ), '<span itemprop="ratingValue">{{ ( data.rating / 20 ).toFixed( 1 ) }}</span>' ); ?></p>
     78                    </div>
     79                    <# } else { #>
    6980                    <div class="rating">
    70                         <div class="star-holder">
    71                             <div class="star-rating" style="width: {{ (data.rating).toFixed(1) }}%"><?php printf( __( '%d stars', 'wporg-themes' ), '{{ Math.round( data.rating ) }}' ); ?></div>
    72                         </div>
    73                         <p class="description"><?php printf( __( '%s out of 5 stars.', 'wporg-themes' ), '{{ (data.rating/20).toFixed(1) }}' ); ?></p>
     81                        <div class="ratings"><?php _e( 'This theme has not been rated yet.', 'wporg-themes' ); ?></div>
    7482                    </div>
     83                    <# } #>
    7584
    7685                    <# if ( data.ratings ) { #>
    7786                    <ul>
    7887                        <li class="counter-container">
    79                             <a href="//wordpress.org/support/view/theme-reviews/{{ data.id }}?filter=5" title="<?php printf( __( 'Click to see reviews that provided a rating of %d stars', 'wporg-themes' ), 5 ); ?>">
     88                            <a href="//wordpress.org/support/view/theme-reviews/{{ data.id }}?filter=5" title="<?php echo esc_attr( sprintf( __( 'Click to see reviews that provided a rating of %d stars', 'wporg-themes' ), 5 ) ); ?>">
    8089                                <span class="counter-label"><?php printf( __( '%d stars', 'wporg-themes' ), 5 ); ?></span>
    8190                                <span class="counter-back">
    … …  
    8695                        </li>
    8796                        <li class="counter-container">
    88                             <a href="//wordpress.org/support/view/theme-reviews/{{ data.id }}?filter=4" title="<?php printf( __( 'Click to see reviews that provided a rating of %d stars', 'wporg-themes' ), 4 ); ?>">
     97                            <a href="//wordpress.org/support/view/theme-reviews/{{ data.id }}?filter=4" title="<?php echo esc_attr( sprintf( __( 'Click to see reviews that provided a rating of %d stars', 'wporg-themes' ), 4 ) ); ?>">
    8998                                <span class="counter-label"><?php printf( __( '%d stars', 'wporg-themes' ), 4 ); ?></span>
    9099                                <span class="counter-back">
    … …  
    95104                        </li>
    96105                        <li class="counter-container">
    97                             <a href="//wordpress.org/support/view/theme-reviews/{{ data.id }}?filter=3" title="<?php printf( __( 'Click to see reviews that provided a rating of %d stars', 'wporg-themes' ), 3 ); ?>">
     106                            <a href="//wordpress.org/support/view/theme-reviews/{{ data.id }}?filter=3" title="<?php echo esc_attr( sprintf( __( 'Click to see reviews that provided a rating of %d stars', 'wporg-themes' ), 3 ) ); ?>">
    98107                                <span class="counter-label"><?php printf( __( '%d stars', 'wporg-themes' ), 3 ); ?></span>
    99108                                <span class="counter-back">
    … …  
    104113                        </li>
    105114                        <li class="counter-container">
    106                             <a href="//wordpress.org/support/view/theme-reviews/{{ data.id }}?filter=2" title="<?php printf( __( 'Click to see reviews that provided a rating of %d stars', 'wporg-themes' ), 2 ); ?>">
     115                            <a href="//wordpress.org/support/view/theme-reviews/{{ data.id }}?filter=2" title="<?php echo esc_attr( sprintf( __( 'Click to see reviews that provided a rating of %d stars', 'wporg-themes' ), 2 ) ); ?>">
    107116                                <span class="counter-label"><?php printf( __( '%d stars', 'wporg-themes' ), 2 ); ?></span>
    108117                                <span class="counter-back">
    … …  
    113122                        </li>
    114123                        <li class="counter-container">
    115                             <a href="//wordpress.org/support/view/theme-reviews/{{ data.id }}?filter=1" title="<?php printf( __( 'Click to see reviews that provided a rating of %d stars', 'wporg-themes' ), 1 ); ?>">
    116                                 <span class="counter-label"><?php printf( __( '%d stars', 'wporg-themes' ), 1 ); ?></span>
     124                            <a href="//wordpress.org/support/view/theme-reviews/{{ data.id }}?filter=1" title="<?php esc_attr_e( 'Click to see reviews that provided a rating of 1 star', 'wporg-themes' ); ?>">
     125                                <span class="counter-label"><?php _e( '1 star', 'wporg-themes' ); ?></span>
    117126                                <span class="counter-back">
    118127                                    <span class="counter-bar" style="width: {{ 100 * data.ratings[1] / data.num_ratings }}%;"></span>

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/view-templates/theme.php

    r1265 r1409  
    33        <# if ( data.screenshot_url ) { #>
    44        <div class="theme-screenshot">
    5             <img src="{{ data.screenshot_url }}?w=572&strip=all" alt="" />
     5            <img src="{{ data.screenshot_url }}?w=286&strip=all" alt="" />
    66        </div>
    77        <# } else { #>
    … …  
    99        <# } #>
    1010        <span class="more-details"><?php _ex( 'More Info', 'theme' ); ?></span>
    11         <div class="theme-author"><?php printf( __( 'By %s' ), '<span class="author">{{ data.author }}</span>' ); ?></div>
     11        <div class="theme-author"><?php printf( __( 'By %s' ), '<span class="author">{{ data.author.display_name }}</span>' ); ?></div>
    1212        <h3 class="theme-name entry-title">{{{ data.name }}}</h3>
    1313
Note: See TracChangeset for help on using the changeset viewer.