Making WordPress.org

Changeset 6347


Ignore:
Timestamp:
01/11/2018 06:52:58 PM (7 years ago)
Author:
obenland
Message:

Themes: Sync Theme Dir styles with Plugin Dir

Brings details like button color or link decorations in sync with recent updates to w.org.

Props Shital Patel for initial patch.
Fixes #3297, #3298.

Location:
sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes
Files:
22 added
1 deleted
7 edited

Legend:

Unmodified
Added
Removed
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/Gruntfile.js

    r1771 r6347  
    1 /* jshint node:true */
    2 module.exports = function(grunt) {
    3     var path = require('path');
     1/**
     2 * Gruntfile.js
     3 *
     4 * @package WordPressdotorg\Theme_Directory\Theme
     5 */
    46
    5     // Load tasks.
    6     require('matchdep').filterDev(['grunt-*']).forEach( grunt.loadNpmTasks );
     7/* global module:false, require:function, process:object */
     8
     9require( 'es6-promise' ).polyfill();
     10
     11module.exports = function( grunt ) {
     12    var isChild = 'wporg' !== grunt.file.readJSON( 'package.json' ).name;
     13
    714
    815    // Project configuration.
    916    grunt.initConfig({
     17        postcss: {
     18            options: {
     19                map: 'build' !== process.argv[2],
     20                processors: [
     21                    require( 'autoprefixer' )( {
     22                        browsers: [
     23                            'Android >= 2.1',
     24                            'Chrome >= 21',
     25                            'Edge >= 12',
     26                            'Explorer >= 7',
     27                            'Firefox >= 17',
     28                            'Opera >= 12.1',
     29                            'Safari >= 6.0'
     30                        ],
     31                        cascade: false
     32                    } ),
     33                    require( 'pixrem' ),
     34                ]
     35            },
     36            dist: {
     37                src: 'css/style.css'
     38            }
     39        },
     40        jshint: {
     41            files: [ 'Gruntfile.js', 'js/**/*.js' ],
     42            options: grunt.file.readJSON( '.jshintrc' )
     43        },
     44        sass: {
     45            options: {
     46                sourceMap: true,
     47                // Don't add source map URL in built version.
     48                omitSourceMapUrl: 'build' === process.argv[2],
     49                outputStyle: 'expanded'
     50            },
     51            dist: {
     52                files: {
     53                    'css/style.css': 'css/style.scss'
     54                }
     55            }
     56        },
     57        sass_globbing: {
     58            itcss: {
     59                files: function() {
     60                    var files = {};
     61
     62                    ['settings', 'tools', 'generic', 'base', 'objects', 'components', 'trumps'].forEach( function( component ) {
     63                        var paths = [ '../wporg/css/' + component + '/**/*.scss', '!../wporg/css/' + component + '/_' + component + '.scss' ];
     64
     65                        if ( isChild ) {
     66                            paths.push( 'css/' + component + '/**/*.scss' );
     67                            paths.push( '!css/' + component + '/_' + component + '.scss' );
     68                        }
     69
     70                        if ( 'components' === component ) {
     71                            paths.push( 'client/components/**/*.scss' );
     72                            paths.push( '!../wporg/css/components/_search.scss' );
     73                            paths.push( '!../wporg/css/components/_main-navigation.scss' );
     74                            paths.push( '!../wporg/css/components/_post-navigation.scss' );
     75                            paths.push( '!../wporg/css/components/_entry-meta.scss' );
     76                            paths.push( '!../wporg/css/components/_widget-area.scss' );
     77                            paths.push( '!../wporg/css/components/_page.scss' );
     78                        }
     79
     80                        if ( 'tools' === component ) {
     81                            paths.push( '!../wporg/css/tools/_cube.scss' );
     82                        }
     83
     84                        if ( 'base' === component ) {
     85                            paths.push( '!../wporg/css/base/_cube.scss' );
     86                        }
     87
     88                        files[ 'css/' + component + '/_' + component + '.scss' ] = paths;
     89                    } );
     90
     91                    return files;
     92                }()
     93            },
     94            options: { signature: false }
     95        },
    1096        rtlcss: {
    1197            options: {
    12                 // rtlcss options
    13                 config: {
    14                     swapLeftRightInUrl: false,
    15                     swapLtrRtlInUrl: false,
    16                     autoRename: false,
    17                     preserveDirectives: true,
     98                // rtlcss options.
     99                opts: {
     100                    clean: false,
     101                    processUrls: { atrule: true, decl: false },
    18102                    stringMap: [
    19103                        {
    20104                            name: 'import-rtl-stylesheet',
     105                            priority: 10,
     106                            exclusive: true,
    21107                            search: [ '.css' ],
    22108                            replace: [ '-rtl.css' ],
     
    25111                                ignoreCase: false
    26112                            }
    27                         }
     113                        } // phpcs:ignore Generic.WhiteSpace.ScopeIndent.IncorrectExact
    28114                    ]
    29115                },
    30                 properties : [
     116                saveUnmodified: false,
     117                plugins: [
    31118                    {
    32119                        name: 'swap-dashicons-left-right-arrows',
    33                         expr: /content/im,
    34                         action: function( prop, value ) {
    35                             if ( value === '"\\f141"' ) { // dashicons-arrow-left
    36                                 value = '"\\f139"';
    37                             } else if ( value === '"\\f340"' ) { // dashicons-arrow-left-alt
    38                                 value = '"\\f344"';
    39                             } else if ( value === '"\\f341"' ) { // dashicons-arrow-left-alt2
    40                                 value = '"\\f345"';
    41                             } else if ( value === '"\\f139"' ) { // dashicons-arrow-right
    42                                 value = '"\\f141"';
    43                             } else if ( value === '"\\f344"' ) { // dashicons-arrow-right-alt
    44                                 value = '"\\f340"';
    45                             } else if ( value === '"\\f345"' ) { // dashicons-arrow-right-alt2
    46                                 value = '"\\f341"';
    47                             } else if ( value === '"\\2192"' ) { // Unicode rightwards arrow
    48                                 value = '"\\2190"';
    49                             } else if ( value === '"\\2190"' ) { // Unicode leftwards arrow
    50                                 value = '"\\2192"';
    51                             }
    52                             return { prop: prop, value: value };
    53                         }
    54                     }
    55                 ],
    56                 saveUnmodified: false
    57             },
    58             theme: {
    59                 expand: true,
    60                 ext: '-rtl.css',
    61                 src: [
    62                     'style.css',
     120                        priority: 10,
     121                        directives: {
     122                            control: {},
     123                            value: []
     124                        },
     125                        processors: [
     126                            {
     127                                expr: /content/im,
     128                                action: function( prop, value ) {
     129                                    if ( value === '"\\f141"' ) { // dashicons-arrow-left.
     130                                        value = '"\\f139"';
     131                                    } else if ( value === '"\\f340"' ) { // dashicons-arrow-left-alt.
     132                                        value = '"\\f344"';
     133                                    } else if ( value === '"\\f341"' ) { // dashicons-arrow-left-alt2.
     134                                        value = '"\\f345"';
     135                                    } else if ( value === '"\\f139"' ) { // dashicons-arrow-right.
     136                                        value = '"\\f141"';
     137                                    } else if ( value === '"\\f344"' ) { // dashicons-arrow-right-alt.
     138                                        value = '"\\f340"';
     139                                    } else if ( value === '"\\f345"' ) { // dashicons-arrow-right-alt2.
     140                                        value = '"\\f341"';
     141                                    }
     142                                    return { prop: prop, value: value };
     143                                }
     144                            } // phpcs:ignore Generic.WhiteSpace.ScopeIndent.IncorrectExact
     145                        ]
     146                    } // phpcs:ignore Generic.WhiteSpace.ScopeIndent.IncorrectExact
    63147                ]
    64148            },
     149            dynamic: {
     150                expand: true,
     151                cwd: 'css/',
     152                dest: 'css/',
     153                ext: '-rtl.css',
     154                src: ['**/style.css']
     155            }
    65156        },
    66         uglify: {
    67             options: {
    68                 ASCIIOnly: true
     157        watch: {
     158            jshint: {
     159                files: ['<%= jshint.files %>'],
     160                tasks: ['jshint']
    69161            },
    70             js: {
    71                 expand: true,
    72                 ext: '.min.js',
    73                 src: [ 'js/theme.js' ]
     162            css: {
     163                files: ['**/*.scss'],
     164                tasks: ['css']
    74165            }
    75166        }
    76167    });
    77168
    78     // Register tasks.
     169    if ( 'build' === process.argv[2] ) {
     170        grunt.config.merge( { postcss: { options : { processors: [ require( 'cssnano' ) ] } } } );
     171    }
    79172
    80     grunt.registerTask( 'build', [
    81         'rtlcss',
    82         'uglify'
    83     ] );
     173    grunt.loadNpmTasks( 'grunt-sass' );
     174    grunt.loadNpmTasks( 'grunt-rtlcss' );
     175    grunt.loadNpmTasks( 'grunt-postcss' );
     176    grunt.loadNpmTasks( 'grunt-sass-globbing' );
     177    grunt.loadNpmTasks( 'grunt-contrib-watch' );
     178    grunt.loadNpmTasks( 'grunt-contrib-jshint' );
    84179
    85     // Default task.
    86     grunt.registerTask('default', ['build']);
    87 
     180    grunt.registerTask( 'css', ['sass_globbing', 'sass', 'postcss', 'rtlcss:dynamic'] );
     181    grunt.registerTask( 'default', ['jshint', 'css'] );
     182    grunt.registerTask( 'build', ['css'] );
    88183};
    89184
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/functions.php

    r6327 r6347  
    2626    remove_action( 'template_redirect', 'redirect_canonical' );
    2727    remove_action( 'template_redirect', 'wp_old_slug_redirect' );
     28
     29    add_theme_support( 'wp4-styles' );
    2830}
    2931add_action( 'after_setup_theme', 'wporg_themes_setup' );
     
    4143    }
    4244
    43     $stylesheet = get_stylesheet_uri();
    44     if ( is_rtl() ) {
    45         $stylesheet = str_replace( '.css', '-rtl.css', $stylesheet );
    46     }
    47     wp_enqueue_style( 'wporg-themes', $stylesheet, array(), 13 );
     45    $rtl = is_rtl() ? '-rtl' : '';
     46    wp_enqueue_style( 'wporg-themes', get_stylesheet_directory_uri() . "/css/style{$rtl}.css", [ 'open-sans', 'dashicons' ], 13 );
    4847
    4948    if ( ! is_singular( 'page' ) ) {
     
    9291    // No Jetpack styles needed.
    9392    add_filter( 'jetpack_implode_frontend_css', '__return_false' );
    94 
    95     // No dashicons needed.
    96     wp_deregister_style( 'dashicons' );
    97     wp_register_style( 'dashicons', '' );
    9893
    9994    /*
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/header.php

    r2755 r6347  
    1010require WPORGPATH . 'header.php';
    1111?>
    12 
    13 <div id="headline">
    14     <div class="wrapper">
    15         <h2 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php _e( 'Theme Directory', 'wporg-themes' ); ?></a></h2>
     12<header id="masthead" class="site-header" role="banner">
     13    <div class="site-branding">
     14        <?php if ( is_home() ) : ?>
     15        <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php echo esc_html_x( 'Theme Directory', 'Site title', 'wporg-themes' ); ?></a></h1>
     16        <?php else : ?>
     17            <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php echo esc_html_x( 'Theme Directory', 'Site title', 'wporg-themes' ); ?></a></p>
     18        <?php endif; ?>
    1619    </div>
    17 </div>
     20</header>
    1821<nav id="site-navigation" class="main-navigation" role="navigation">
    1922    <ul id="menu-theme-directory" class="menu">
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/package.json

    r5069 r6347  
    33  "version": "1.0.0",
    44  "description": "Theme for the WordPress Theme Directory.",
     5  "author": "wordpressdotorg",
     6  "license": "GPL-2.0+",
     7  "scripts": {
     8    "test": "echo \"Error: no test specified\" && exit 1"
     9  },
    510  "repository": {
    611    "type": "svn",
    712    "url": "https://meta.svn.wordpress.org/sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes"
    813  },
    9   "author": "wordpressdotorg",
    10   "license": "GPL-2.0+",
    1114  "devDependencies": {
    12     "grunt": "~0.4.5",
    13     "grunt-contrib-uglify": "~0.9.1",
    14     "grunt-rtlcss": "~1.6.0",
    15     "matchdep": "~0.3.0"
     15    "autoprefixer": "^6.3.6",
     16    "cssnano": "^3.7.4",
     17    "grunt": "^1.0.1",
     18    "grunt-contrib-jshint": "^1.0.0",
     19    "grunt-contrib-watch": "^1.0.0",
     20    "grunt-postcss": "^0.8.0",
     21    "grunt-rtlcss": "^2.0.1",
     22    "grunt-sass": "^1.2.0",
     23    "grunt-sass-globbing": "^1.5.1",
     24    "pixrem": "^3.0.2",
     25    "es6-promise": "~4.0.5"
    1626  }
    1727}
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/style.css

    r6326 r6347  
    1 /*
     1/* phpcs:ignoreFile */
     2/*!
    23Theme Name: WordPress.org Themes
    34Theme URI: https://wordpress.org/themes
     
    89License: GNU General Public License v2 or later
    910License URI: http://www.gnu.org/licenses/gpl-2.0.html
    10 */
    11 
    12 body {
    13     background: #f1f1f1;
    14     font-family: 'Open Sans', sans-serif;
    15 }
    16 
    17 p {
    18     margin-bottom: 1.5em;
    19 }
    20 
    21 p a,
    22 p a:hover {
    23     border: none;
    24 }
    25 
    26 /* Assistive text */
    27 .screen-reader-text {
    28     clip: rect(1px, 1px, 1px, 1px);
    29     height: 1px;
    30     overflow: hidden;
    31     position: absolute !important;
    32     width: 1px;
    33 }
    34 
    35 .screen-reader-text:focus {
    36     background-color: #f1f1f1;
    37     border-radius: 3px;
    38     box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    39     clip: auto !important;
    40     color: #21759b;
    41     display: block;
    42     font-size: 14px;
    43     font-weight: bold;
    44     height: auto;
    45     line-height: normal;
    46     padding: 15px 23px 14px;
    47     position: absolute;
    48     left: 5px;
    49     top: 5px;
    50     text-decoration: none;
    51     width: auto;
    52     z-index: 100000; /* Above WP toolbar */
    53 }
    54 
    55 /* Dowload Chart RTL horizontal scrolling fix */
    56 .chart > div > div > div > div {
    57     left: -10000px !important;
    58     right: auto !important;
    59 }
    60 
    61 /* Clearing */
    62 .clear:before,
    63 .clear:after,
    64 .theme-wrap .theme-about:before,
    65 .theme-wrap .theme-about:after,
    66 .main-navigation:before,
    67 .main-navigation:after {
    68     content: "";
    69     display: table;
    70 }
    71 
    72 .clear:after,
    73 .theme-wrap .theme-about:after,
    74 .main-navigation:after {
    75     clear: both;
    76 }
    77 
    78 /* Regular Content. */
    79 h2 {
    80     font-size: 28px;
    81 }
    82 
    83 ul, ol {
    84     margin: 0 0 22px 0;
    85     padding-left: 26px;
    86 }
    87 
    88 .type-page {
    89     margin: 30px auto;
    90 }
    91 
    92 .entry-title {
    93     font-size: 36px;
    94     font-weight: 300;
    95     line-height: 1.3;
    96     margin-bottom: 20px;
    97 }
    98 
    99 .entry-content {
    100     font-size: 16px;
    101     line-height: 1.6;
    102 }
    103 
    104 .entry-content p {
    105     margin: 0 0 22px 0;
    106 }
    107 
    108 /* WP.org header download button */
    109 #wporg-header .download {
    110     float: right;
    111     height: 34px;
    112     margin-right: 14px;
    113     overflow: hidden;
    114     padding: 0 0 34px;
    115 }
    116 
    117 @media screen and (max-width:820px) {
    118     #wporg-header .download {
    119         display: none;
    120     }
    121 }
    122 
    123 @media screen and (max-width:768px) {
    124     #wporg-header .download {
    125         display: block;
    126         float: none;
    127         margin: 10px 20px 20px;
    128         padding-bottom: 0;
    129         height: auto;
    130     }
    131 
    132     #wporg-header .download a {
    133         padding: 4px 10px;
    134     }
    135 }
    136 
    137 #wporg-header .download a {
    138     margin: 0;
    139     padding: 0 16px;
    140 }
    141 
    142 #wporg-header .download a:hover {
    143     color: #eee;
    144 }
    145 
    146 /*------------------------------------------------------------------------------
    147   16.0 - Themes
    148 ------------------------------------------------------------------------------*/
    149 
    150 .wrap {
    151     box-sizing: border-box;
    152     margin-left: auto;
    153     margin-right: auto;
    154     max-width: 960px;
    155     padding: 0 10px 100px;
    156     position: relative;
    157 }
    158 
    159 .theme-browser .themes {
    160     clear: both;
    161     font-size: 0;
    162 }
    163 
    164 .modal-open .wp-filter,
    165 .modal-open .rendered .themes {
    166     display: none;
    167 }
    168 
    169 /**
    170  * Main theme element
    171  * (has flexible margins)
    172  */
    173 .theme-browser .theme {
    174     border: 1px solid #dedede;
    175     -webkit-box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
    176     box-shadow:         0 1px 1px -1px rgba(0,0,0,0.1);
    177     box-sizing: border-box;
    178     cursor: pointer;
    179     display: inline-block;
    180     margin: 0 4% 4% 0;
    181     position: relative;
    182     width: 30.6%;
    183 }
    184 
    185 .ie8 .theme-browser .theme {
    186     width: 30%;
    187     margin: 0 3% 4% 0;
    188 }
    189 
    190 .theme-browser .theme:nth-child(3n) {
    191     margin-right: 0;
    192 }
    193 
    194 .theme-browser .theme:hover,
    195 .theme-browser .theme:focus {
    196     border-color: #5b9dd9;
    197     -webkit-box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
    198     box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
    199     cursor: pointer;
    200 }
    201 
    202 .theme-browser .theme:focus {
    203     border-color: #5b9dd9;
    204     -webkit-box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
    205     box-shadow:         0 0 2px rgba( 30, 140, 190, 0.8 );
    206 }
    207 
    208 .theme-browser .theme .entry-title {
    209     background: #fff;
    210     background: rgba(255,255,255,0.65);
    211     -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
    212     box-shadow:         inset 0 1px 0 rgba(0,0,0,0.1);
    213     font-size: 15px;
    214     font-weight: 600;
    215     height: 18px;
    216     margin: 0;
    217     overflow: hidden;
    218     padding: 15px;
    219     text-overflow: ellipsis;
    220     white-space: nowrap;
    221 }
    222 
    223 /* Activate and Customize buttons, shown on hover and focus */
    224 .theme-browser .theme .theme-actions {
    225     background: rgba(244, 244, 244, 0.7);
    226     bottom: 0;
    227     border-left: 1px solid rgba(0,0,0,0.05);
    228     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    229     height: 38px;
    230     opacity: 0;
    231     padding: 9px 10px 0 10px;
    232     position: absolute;
    233     right: 0;
    234     -webkit-transition: opacity 0.1s ease-in-out;
    235     transition:         opacity 0.1s ease-in-out;
    236 }
    237 
    238 .theme-browser .theme:hover .theme-actions,
    239 .theme-browser .theme.focus .theme-actions,
    240 .theme-browser .theme:focus .theme-actions {
    241     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    242     opacity: 1;
    243 }
    244 
    245 /**
    246  * Theme Screenshot
    247  *
    248  * Has a fixed aspect ratio of 1.5 to 1 regardless of screenshot size
    249  * It is also responsive.
    250  */
    251 .theme-browser .theme .theme-screenshot {
    252     display: block;
    253     overflow: hidden;
    254     position: relative;
    255     -webkit-transition: opacity 0.2s ease-in-out;
    256     transition:         opacity 0.2s ease-in-out;
    257 }
    258 
    259 .theme-browser .theme .theme-screenshot:after {
    260     content: '';
    261     display: block;
    262     padding-top: 66.66666%; /* using a 3/2 aspect ratio */
    263 }
    264 
    265 .theme-browser .theme:hover .theme-screenshot,
    266 .theme-browser .theme:focus .theme-screenshot {
    267     background: #fff;
    268 }
    269 
    270 .theme-browser .theme .theme-screenshot img {
    271     height: auto;
    272     left: 0;
    273     position: absolute;
    274     top: 0;
    275     -webkit-transform: translateZ( 0 );
    276     -webkit-transition: opacity 0.2s ease-in-out;
    277     transition:         opacity 0.2s ease-in-out;
    278     width: 100%;
    279 }
    280 
    281 .theme-browser .theme:hover .theme-screenshot img,
    282 .theme-browser .theme:focus .theme-screenshot img {
    283     opacity: 0.4;
    284 }
    285 
    286 .theme-browser .theme .more-details {
    287     background: #23282d;
    288     background: rgba(0,0,0,0.7);
    289     border-radius: 3px;
    290     color: #fff;
    291     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    292     font-size: 15px;
    293     -webkit-font-smoothing: antialiased;
    294     font-weight: 600;
    295     left: 25%;
    296     opacity: 0;
    297     padding: 15px 12px;
    298     position: absolute;
    299     right: 25%;
    300     text-align: center;
    301     text-shadow: 0 1px 0 rgba(0,0,0,0.6);
    302     top: 35%;
    303     -webkit-transition: opacity 0.1s ease-in-out;
    304     transition:         opacity 0.1s ease-in-out;
    305 }
    306 
    307 /* Current theme needs to have its action always on view */
    308 .theme-browser .theme.active:focus .theme-actions {
    309     display: block;
    310 }
    311 
    312 .theme-browser .theme:hover .more-details,
    313 .theme-browser .theme:focus .more-details,
    314 .theme-browser .theme .more-details:focus {
    315     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    316     opacity: 1;
    317 }
    318 
    319 .theme-browser .theme .theme-author {
    320     background: #23282d;
    321     color: #eee;
    322     display: none;
    323     font-size: 14px;
    324     margin: 0 10px;
    325     padding: 5px 10px;
    326     position: absolute;
    327     bottom: 56px;
    328 }
    329 
    330 /* Displays the author name on Index, if the search is preceded by `author:`. */
    331 .theme-browser .theme.display-author .theme-author,
    332 body.author .theme-browser .theme .theme-author  {
    333     display: block;
    334 }
    335 
    336 .theme-browser .theme.display-author .theme-author a {
    337     color: inherit;
    338     text-decoration: none;
    339 }
    340 
    341 /* Single Theme Navigation */
    342 .theme-navigation {
    343     background: #fff;
    344     border: 1px solid #e5e5e5;
    345     box-sizing: border-box;
    346     -webkit-box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.04 );
    347     box-shadow:         0 1px 1px rgba( 0, 0, 0, 0.04 );
    348     margin: 20px 0 25px;
    349 }
    350 
    351 .theme-navigation .post-navigation {
    352     float: right;
    353 }
    354 
    355 .theme-navigation .close {
    356     background-color: transparent;
    357     border: 0;
    358     color: #21759b;
    359     cursor: pointer;
    360     display: inline-block;
    361     font-size: 14px;
    362     font-weight: 700;
    363     margin: 0;
    364     padding: 19px 15px;
    365     -webkit-transition: color .1s ease-in-out;
    366     transition:         color .1s ease-in-out;
    367 }
    368 
    369 .theme-navigation a.close {
    370     padding: 16.5px 15px;
    371 }
    372 
    373 .theme-navigation .close:before {
    374     content: "\2190";
    375     margin-right: 5px;
    376 }
    377 
    378 .theme-navigation .close:hover,
    379 .theme-navigation .close:active {
    380     color: #d54e21;
    381     outline: none;
    382 }
    383 
    384 .theme-navigation .nav-links a,
    385 .theme-navigation .right,
    386 .theme-navigation .left {
    387     background-color: transparent;
    388     border: 0;
    389     border-left: 1px solid #ddd;
    390     color: #777;
    391     cursor: pointer;
    392     float: left;
    393     height: 56px;
    394     text-align: center;
    395     -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
    396     transition:         color .1s ease-in-out, background .1s ease-in-out;
    397     width: 59px;
    398 }
    399 
    400 .theme-navigation .nav-links a:before,
    401 .theme-navigation .right:before,
    402 .theme-navigation .left:before {
    403     text-decoration: inherit;
    404     -webkit-font-smoothing: antialiased;
    405 }
    406 
    407 .theme-navigation .nav-links a:hover,
    408 .theme-navigation .nav-links a:focus,
    409 .theme-navigation .right:focus,
    410 .theme-navigation .right:hover,
    411 .theme-navigation .left:focus,
    412 .theme-navigation .left:hover {
    413     background: #ddd;
    414     border-color: #ccc;
    415     color: #000;
    416 }
    417 
    418 .theme-navigation .right:focus,
    419 .theme-navigation .left:focus {
    420     -webkit-box-shadow: none;
    421     box-shadow:         none;
    422     outline: none;
    423 }
    424 
    425 /* These dashicons are in-line to allow the rtl processor to flip them */
    426 .theme-navigation .dashicons-arrow-left-alt2:before {
    427     content: "\f341";
    428 }
    429 .theme-navigation .dashicons-arrow-right-alt2:before {
    430     content: "\f345";
    431 }
    432 
    433 .theme-navigation .left.disabled,
    434 .theme-navigation .right.disabled,
    435 .theme-navigation .left.disabled:hover,
    436 .theme-navigation .right.disabled:hover {
    437     background: inherit;
    438     color: #ccc;
    439     cursor: inherit;
    440 }
    441 
    442 /* Single Theme Body */
    443 .theme-wrap {
    444     background: #fff;
    445     border: 1px solid #e5e5e5;
    446     -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
    447     box-shadow:         0 1px 1px rgba(0, 0, 0, 0.04);
    448     font-size: 10px;
    449     -webkit-overflow-scrolling: touch;
    450 }
    451 
    452 .theme-wrap .theme-about {
    453     padding: 2% 4%;
    454 }
    455 
    456 .theme-wrap .theme-name {
    457     color: #222;
    458     display: inline-block;
    459 }
    460 
    461 .theme-wrap .theme-author {
    462     border: none;
    463     color: #686868;
    464     display: inline-block;
    465     font-style: italic;
    466     margin: 0 5px;
    467 }
    468 
    469 .theme-wrap .theme-actions {
    470     margin: 0 0 1.5em;
    471     text-align: center;
    472 }
    473 
    474 .theme-wrap .theme-actions a {
    475     height: 36px;
    476     padding: 4px 10px;
    477     width: 48%;
    478 }
    479 
    480 .ie8 .theme-wrap .theme-actions {
    481     border: 1px solid #eee;
    482 }
    483 
    484 .theme-wrap .theme-meta-info .version,
    485 .theme-wrap .theme-meta-info .updated,
    486 .theme-wrap .theme-meta-info .active_installs {
    487     margin: 0 0 0.5em;
    488 }
    489 
    490 .theme-wrap .theme-meta-info a:after {
    491     content: "\2192";
    492     margin-left: 5px;
    493 }
    494 
    495 /**
    496  * Theme Screenshots gallery
    497  */
    498 .theme-wrap .theme-screenshots {
    499     float: left;
    500     margin: 0 30px 0 0;
    501     width: 55%;
    502     max-width: 880px;
    503     text-align: center;
    504 }
    505 
    506 /* First screenshot, shown big */
    507 .theme-wrap .screenshot {
    508     border: 1px solid #fff;
    509     -webkit-box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.2 );
    510     box-shadow:         0 0 0 1px rgba( 0, 0, 0, 0.2 );
    511     box-sizing: border-box;
    512     overflow: hidden;
    513     position: relative;
    514 }
    515 
    516 .theme-wrap .screenshot:after {
    517     content: '';
    518     display: block;
    519     padding-top: 75%; /* using a 4/3 aspect ratio */
    520 }
    521 
    522 .theme-wrap .screenshot img {
    523     height: auto;
    524     position: absolute;
    525     left: 0;
    526     top: 0;
    527     vertical-align: middle;
    528     width: 100%;
    529 }
    530 
    531 .theme-wrap .screenshot.selected {
    532     background: transparent;
    533     border: 2px solid #00a0d2;
    534 }
    535 
    536 .theme-wrap .screenshot.selected img {
    537     opacity: 0.8;
    538 }
    539 
    540 /* No screenshot placeholder */
    541 .theme-browser .theme .theme-screenshot.blank,
    542 .theme-wrap .screenshot.blank {
    543     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYGWO8d+/efwYkoKioiMRjYGBC4WHhUK6A8T8QIJt8//59ZC493AAAQssKpBK4F5AAAAAASUVORK5CYII=);
    544 }
    545 
    546 /**
    547  * Theme heading information
    548  */
    549 .theme-wrap .theme-info {
    550     width: calc(70% - 30px);
    551     float: left;
    552 }
    553 
    554 .theme-wrap .theme-about .theme-head,
    555 .theme-wrap .theme-about .theme-meta {
    556     float: right;
    557     width: calc(32% - 30px);
    558 }
    559 
    560 .theme-wrap .theme-about .theme-head,
    561 .theme-wrap .theme-about .theme-info > div:not(:last-of-type),
    562 .theme-wrap .theme-about .theme-meta > div:not(:last-of-type) {
    563     margin-bottom: 50px;
    564 }
    565 
    566 .theme-wrap .theme-description {
    567     color: #555;
    568     font-size: 15px;
    569     font-weight: 400;
    570     line-height: 1.5;
    571 }
    572 
    573 .theme-wrap .theme-tags {
    574     font-size: 13px;
    575 }
    576 
    577 .theme-wrap .theme-downloads .total-downloads {
    578     color: #555;
    579     font-size: 14px;
    580     font-weight: 400;
    581     line-height: 1.5;
    582     margin: 1.5em 0 0 0;
    583 }
    584 
    585 .theme-wrap .theme-devs,
    586 .theme-wrap .theme-support,
    587 .theme-wrap .theme-translations,
    588 .theme-wrap .theme-meta-info {
    589     font-size: 1.4em;
    590 }
    591 
    592 .theme-wrap .theme-devs h5 {
    593     margin: 1em 0 0 0;
    594 }
    595 .theme-wrap .theme-devs li {
    596     line-height: 1.5;
    597 }
    598 
    599 .theme-install-overlay iframe {
    600     border: 0;
    601     height: 100%;
    602     width: 100%;
    603     z-index: 20;
    604     -webkit-transition: opacity 0.3s;
    605     transition: opacity 0.3s;
    606 }
    60711
    60812
    609 /*------------------------------------------------------------------------------
    610   16.2 - Install Themes
    611 ------------------------------------------------------------------------------*/
     13This theme, like WordPress, is licensed under the GPL.
     14Use it to make something cool, have fun, and share what you've learned with others.
    61215
    613 .no-themes {
    614     clear: both;
    615     color: #666;
    616     font-size: 18px;
    617     font-style: normal;
    618     margin: 0;
    619     padding: 100px 0 0;
    620     text-align: center;
    621     display: none;
    622 }
    623 
    624 .no-results .no-themes {
    625     display: block;
    626 }
    627 
    628 .theme-browser .no-themes {
    629     margin: 100px 0 150px;
    630 }
     16Normalizing styles have been helped along thanks to the fine work of
     17Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
    63118
    63219
    633 /* Ratings */
    634 .rating {
    635     margin: 0 0 1.5em;
    636     min-height: 26px;
    637 }
    63820
    639 .rating span[class]:before {
    640     color: #ffb900;
    641     content: "\f154";
    642     display: inline-block;
    643     -webkit-font-smoothing: antialiased;
    644     font: normal 20px/1 'dashicons';
    645     vertical-align: top;
    646 }
     21PLEASE DO NOT EDIT THIS FILE.
    64722
    648 /* Half stars */
    649 .rating-10 span.one:before,
    650 .rating-30 span.two:before,
    651 .rating-50 span.three:before,
    652 .rating-70 span.four:before,
    653 .rating-90 span.five:before {
    654     content: "\f459";
    655 }
    656 
    657 .rtl .rating-10 span.one:before,
    658 .rtl .rating-30 span.two:before,
    659 .rtl .rating-50 span.three:before,
    660 .rtl .rating-70 span.four:before,
    661 .rtl .rating-90 span.five:before {
    662     -webkit-transform: rotateY(180deg);
    663     -ms-transform: rotateY(180deg);
    664     transform: rotateY(180deg);
    665 }
    666 
    667 /* Full stars */
    668 .rating-20 span.one:before {
    669     content: "\f155";
    670 }
    671 .rating-30 span.one:before,
    672 .rating-40 span.one:before,
    673 .rating-40 span.two:before {
    674     content: "\f155";
    675 }
    676 .rating-50 span.one:before,
    677 .rating-50 span.two:before,
    678 .rating-60 span.one:before,
    679 .rating-60 span.two:before,
    680 .rating-60 span.three:before {
    681     content: "\f155";
    682 }
    683 .rating-70 span.one:before,
    684 .rating-70 span.two:before,
    685 .rating-70 span.three:before,
    686 .rating-80 span.one:before,
    687 .rating-80 span.two:before,
    688 .rating-80 span.three:before,
    689 .rating-80 span.four:before {
    690     content: "\f155";
    691 }
    692 .rating-90 span.one:before,
    693 .rating-90 span.two:before,
    694 .rating-90 span.three:before,
    695 .rating-90 span.four:before,
    696 .rating-100 span.one:before,
    697 .rating-100 span.two:before,
    698 .rating-100 span.three:before,
    699 .rating-100 span.four:before,
    700 .rating-100 span.five:before {
    701     content: "\f155";
    702 }
    703 .rating .ratings {
    704     display: block;
    705     line-height: 20px;
    706     color: #999;
    707 }
    708 
    709 .theme-ratings .description {
    710     color: #aa9;
    711     display: inline-block;
    712     font-style: italic;
    713     margin: 0 5px;
    714     vertical-align: text-bottom;
    715 }
    716 .theme-ratings ul {
    717     list-style-type: none;
    718     padding: 0;
    719 }
    720 .theme-ratings .counter-container,
    721 .theme-ratings .counter-container a {
    722     display: inline-block;
    723     width: 100%;
    724 }
    725 .theme-ratings .counter-label,
    726 .theme-ratings .counter-count {
    727     line-height: 1.75;
    728 }
    729 .theme-ratings .counter-label {
    730     float: left;
    731     margin-right: 5px;
    732     min-width: 58px;
    733 }
    734 .theme-ratings .counter-back,
    735 .theme-ratings .counter-bar {
    736     float: left;
    737     height: 17px;
    738 }
    739 .theme-ratings .counter-back {
    740     background-color: #ececec;
    741     width: 64%;
    742     width: -webkit-calc(100% - 88px);
    743     width: calc(100% - 88px);
    744     overflow: hidden;
    745 }
    746 .theme-ratings .counter-bar {
    747     background-color: #ffc733;
    748 }
    749 .theme-ratings .counter-count {
    750     float: left;
    751     margin-left: 5px;
    752 }
    753 
    754 /*------------------------------------------------------------------------------
    755   23.0 - Full Overlay w/ Sidebar
    756 ------------------------------------------------------------------------------*/
    757 
    758 body.full-overlay-active {
    759     overflow: hidden;
    760 }
    761 
    762 .wp-full-overlay {
    763     background: transparent;
    764     z-index: 500000;
    765     position: fixed;
    766     overflow: visible;
    767     top: 0;
    768     bottom: 0;
    769     left: 0;
    770     right: 0;
    771     height: 100%;
    772     min-width: 0;
    773 }
    774 
    775 .wp-full-overlay-sidebar {
    776     border: 1px solid #ddd;
    777     box-sizing: border-box;
    778     position: fixed;
    779     width: 300px;
    780     height: 100%;
    781     top: 0;
    782     bottom: 0;
    783     left: 0;
    784     padding: 0;
    785     margin: 0;
    786     z-index: 10;
    787     background: #eee;
    788 }
    789 
    790 .wp-full-overlay.collapsed .wp-full-overlay-sidebar {
    791     overflow: visible;
    792 }
    793 
    794 .wp-full-overlay.expanded {
    795     margin-left: 300px;
    796 }
    797 
    798 .wp-full-overlay.collapsed .wp-full-overlay-sidebar {
    799     margin-left: -300px;
    800 }
    801 
    802 .wp-full-overlay-sidebar:after {
    803     content: '';
    804     display: block;
    805     position: absolute;
    806     top: 0;
    807     bottom: 0;
    808     right: 0;
    809     width: 3px;
    810     z-index: 1000;
    811 }
    812 
    813 .wp-full-overlay-main {
    814     position: absolute;
    815     left: 0;
    816     right: 0;
    817     top: 0;
    818     bottom: 0;
    819     height: 100%;
    820 }
    821 
    822 .wp-full-overlay-sidebar .wp-full-overlay-header {
    823     position: absolute;
    824     left: 0;
    825     right: 0;
    826     height: 45px;
    827     padding: 0 15px;
    828     line-height: 45px;
    829     z-index: 10;
    830     margin: 0;
    831     border-top: none;
    832     -webkit-box-shadow: none;
    833     box-shadow: none;
    834 }
    835 
    836 .wp-full-overlay-sidebar .wp-full-overlay-header a.back {
    837     margin-top: 9px;
    838 }
    839 
    840 .wp-full-overlay-sidebar .wp-full-overlay-footer {
    841     bottom: 0;
    842     border-bottom: none;
    843     border-top: none;
    844     -webkit-box-shadow: none;
    845     box-shadow: none;
    846 }
    847 
    848 .wp-full-overlay-sidebar .wp-full-overlay-sidebar-content {
    849     position: absolute;
    850     top: 45px;
    851     bottom: 45px;
    852     left: 0;
    853     right: 0;
    854     overflow: auto;
    855 }
    856 
    857 /* Close & Navigation Links */
    858 .theme-install-overlay .wp-full-overlay-sidebar .wp-full-overlay-header {
    859     padding: 0;
    860 }
    861 
    862 .theme-install-overlay .close-full-overlay,
    863 .theme-install-overlay .previous-theme,
    864 .theme-install-overlay .next-theme {
    865     display: block;
    866     position: relative;
    867     float: left;
    868     width: 45px;
    869     height: 45px;
    870     padding-right: 2px;
    871     background: #eee;
    872     border-right: 1px solid #ddd;
    873     color: #444;
    874     cursor: pointer;
    875     text-decoration: none;
    876     -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
    877     transition:         color .1s ease-in-out, background .1s ease-in-out;
    878 }
    879 
    880 .theme-install-overlay .close-full-overlay:hover,
    881 .theme-install-overlay .close-full-overlay:focus,
    882 .theme-install-overlay .previous-theme:hover,
    883 .theme-install-overlay .previous-theme:focus,
    884 .theme-install-overlay .next-theme:hover,
    885 .theme-install-overlay .next-theme:focus {
    886     background: #ddd;
    887     border-color: #ccc;
    888     color: #000;
    889     outline: none;
    890     -webkit-box-shadow: none;
    891     box-shadow: none;
    892 }
    893 
    894 .theme-install-overlay .close-full-overlay:before {
    895     font: normal 22px/1 dashicons;
    896     content: "\f335";
    897     position: relative;
    898     top: 7px;
    899     left: 13px;
    900 }
    901 
    902 .theme-install-overlay .previous-theme:before {
    903     font: normal 20px/1 dashicons;
    904     content: "\f341";
    905     position: relative;
    906     top: 6px;
    907     left: 14px;
    908 }
    909 
    910 .theme-install-overlay .next-theme:before {
    911     font: normal 20px/1 dashicons;
    912     content: "\f345";
    913     position: relative;
    914     top: 6px;
    915     left: 13px;
    916 }
    917 
    918 .theme-install-overlay .previous-theme.disabled,
    919 .theme-install-overlay .next-theme.disabled,
    920 .theme-install-overlay .previous-theme.disabled:hover,
    921 .theme-install-overlay .previous-theme.disabled:focus,
    922 .theme-install-overlay .next-theme.disabled:hover,
    923 .theme-install-overlay .next-theme.disabled:focus {
    924     color: #bbb;
    925     background: #eee;
    926     cursor: default;
    927     pointer-events: none;
    928 }
    929 
    930 /* Collapse Button */
    931 .wp-full-overlay a.collapse-sidebar {
    932     position: absolute;
    933     bottom: 12px;
    934     left: 0;
    935     z-index: 50;
    936     display: block;
    937     width: 29px;
    938     height: 25px;
    939     margin-left: 15px;
    940     padding: 0;
    941     -webkit-border-radius: 50%;
    942     border-radius: 50%;
    943     color: #777;
    944     text-decoration: none;
    945 }
    946 
    947 .wp-full-overlay a.collapse-sidebar:hover {
    948     color: #0073aa;
    949 }
    950 
    951 .wp-full-overlay.collapsed .collapse-sidebar {
    952     height: 27px;
    953     left: 100%;
    954     position: absolute;
    955 }
    956 
    957 .wp-full-overlay .collapse-sidebar-arrow {
    958     position: static;
    959     margin-top: 0;
    960     margin-left: 0;
    961     display: block;
    962     width: auto;
    963     height: auto;
    964     background: none;
    965 }
    966 
    967 .wp-full-overlay .collapse-sidebar-arrow:before {
    968     -webkit-border-radius: 50%;
    969     border-radius: 50%;
    970     float: left;
    971     content: "\f148";
    972     background: #eee;
    973     font: normal 30px/1 'dashicons';
    974     speak: none;
    975     display: block;
    976     padding: 0;
    977     text-indent: 0;
    978     text-align: center;
    979     position: relative;
    980     -webkit-font-smoothing: antialiased;
    981     -moz-osx-font-smoothing: grayscale;
    982     text-decoration: none !important;
    983 }
    984 
    985 .wp-full-overlay.collapsed .collapse-sidebar-arrow:before,
    986 .rtl .wp-full-overlay .collapse-sidebar-arrow:before {
    987     -webkit-transform: rotate(180deg);
    988     -ms-transform:     rotate(180deg);
    989     transform:         rotate(180deg);
    990 }
    991 
    992 .rtl .wp-full-overlay.collapsed .collapse-sidebar-arrow:before {
    993     -webkit-transform: none;
    994     -ms-transform:     none;
    995     transform:         none;
    996 }
    997 
    998 .wp-full-overlay.collapsed .collapse-sidebar-arrow {
    999     background-position: -1px -109px;
    1000 }
    1001 
    1002 .wp-full-overlay .collapse-sidebar-label {
    1003     font-size: 16px;
    1004     left: 100%;
    1005     line-height: 1.8;
    1006     margin-left: 10px;
    1007     position: absolute;
    1008 }
    1009 
    1010 .wp-full-overlay.collapsed .collapse-sidebar-label {
    1011     display: none;
    1012 }
    1013 
    1014 /* Animations */
    1015 .wp-full-overlay,
    1016 .wp-full-overlay-sidebar,
    1017 .wp-full-overlay .collapse-sidebar,
    1018 .wp-full-overlay-main {
    1019     -webkit-transition-property: left, right, top, bottom, width, margin;
    1020     transition-property:         left, right, top, bottom, width, margin;
    1021     -webkit-transition-duration: 0.2s;
    1022     transition-duration:         0.2s;
    1023 }
    1024 
    1025 /*------------------------------------------------------------------------------
    1026   24.0 - Customize Loader
    1027 ------------------------------------------------------------------------------*/
    1028 
    1029 .no-customize-support .hide-if-no-customize,
    1030 .customize-support .hide-if-customize,
    1031 .no-customize-support.wp-core-ui .hide-if-no-customize,
    1032 .no-customize-support .wp-core-ui .hide-if-no-customize,
    1033 .customize-support.wp-core-ui .hide-if-customize,
    1034 .customize-support .wp-core-ui .hide-if-customize {
    1035     display: none;
    1036 }
    1037 
    1038 #customize-container {
    1039     display: none;
    1040     background: #fff;
    1041     z-index: 500000;
    1042     position: fixed;
    1043     overflow: visible;
    1044     top: 0;
    1045     bottom: 0;
    1046     left: 0;
    1047     right: 0;
    1048     height: 100%;
    1049 }
    1050 
    1051 .customize-active #customize-container {
    1052     display: block;
    1053 }
    1054 
    1055 .customize-loading #customize-container iframe {
    1056     opacity: 0;
    1057 }
    1058 
    1059 .customize-loading #customize-container {
    1060     background: #fff url(/wp-admin/images/spinner.gif) no-repeat fixed center center;
    1061     -webkit-background-size: 20px 20px;
    1062     background-size: 20px 20px;
    1063 }
    1064 
    1065 #customize-container iframe,
    1066 .theme-install-overlay iframe {
    1067     height: 100%;
    1068     width: 100%;
    1069     z-index: 20;
    1070     -webkit-transition: opacity 0.3s;
    1071     transition: opacity 0.3s;
    1072 }
    1073 
    1074 #customize-container .collapse-sidebar {
    1075     bottom: 16px;
    1076 }
    1077 
    1078 #customize-controls {
    1079     margin-top: 0;
    1080 }
    1081 
    1082 .theme-install-overlay {
    1083     display: none;
    1084 }
    1085 
    1086 .theme-install-overlay.single-theme {
    1087     display: block;
    1088 }
    1089 
    1090 .install-theme-info {
    1091     display: none;
    1092     padding: 10px 20px 60px;
    1093 }
    1094 
    1095 .single-theme .install-theme-info {
    1096     padding-top: 15px;
    1097 }
    1098 
    1099 .theme-install-overlay .install-theme-info {
    1100     display: block;
    1101 }
    1102 
    1103 .install-theme-info .theme-install {
    1104     float: right;
    1105     margin-top: 18px;
    1106 }
    1107 
    1108 .install-theme-info .theme-name {
    1109     font-size: 16px;
    1110     line-height: 24px;
    1111     margin-bottom: 0;
    1112     margin-top: 0;
    1113 }
    1114 
    1115 .install-theme-info .theme-screenshot {
    1116     margin-top: 15px;
    1117     width: 258px;
    1118     border: 1px solid #ccc;
    1119 }
    1120 
    1121 .install-theme-info .theme-details {
    1122     overflow: hidden;
    1123 }
    1124 
    1125 .theme-details .theme-version {
    1126     margin: 15px 0;
    1127     float: left;
    1128 }
    1129 
    1130 .theme-details .rating {
    1131     margin: 7px 0;
    1132     float: right;
    1133 }
    1134 
    1135 .theme-details .theme-description {
    1136     float: left;
    1137     color: #777;
    1138     line-height: 20px;
    1139     max-width: 100%;
    1140 }
    1141 
    1142 .theme-install-overlay .wp-full-overlay-header .theme-install {
    1143     float: right;
    1144     margin: 8px 10px 0 0;
    1145 }
    1146 
    1147 .theme-install-overlay .wp-full-overlay-sidebar-content {
    1148     background: #fff;
    1149     border-top: 1px solid #ddd;
    1150     border-bottom: 1px solid #ddd;
    1151 }
    1152 
    1153 .theme-install-overlay .wp-full-overlay-main {
    1154     background: #fff url(/wp-admin/images/spinner.gif) no-repeat center center;
    1155     -webkit-background-size: 20px 20px;
    1156     background-size: 20px 20px;
    1157 }
    1158 
    1159 
    1160 /* assorted overrides */
    1161 #headline h2 {
    1162     margin-bottom: 16px;
    1163 }
    1164 
    1165 /* Spinner */
    1166 .spinner {
    1167     background: url(/wp-admin/images/spinner.gif) no-repeat;
    1168     -webkit-background-size: 20px 20px;
    1169     background-size: 20px 20px;
    1170     display: none;
    1171     opacity: 0.7;
    1172     filter: alpha(opacity=70);
    1173     width: 20px;
    1174     height: 20px;
    1175     margin: 25% auto 70%;
    1176 }
    1177 
    1178 .loading-content .spinner {
    1179     display: block;
    1180 }
    1181 
    1182 /* Filter bar */
    1183 .wp-filter {
    1184     display: inline-block;
    1185     position: relative;
    1186     box-sizing: border-box;
    1187     margin: 20px 0 25px;
    1188     padding: 0 20px;
    1189     width: 100%;
    1190     -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
    1191     box-shadow:         0 1px 1px rgba(0,0,0,0.04);
    1192     border: 1px solid #e5e5e5;
    1193     background: #fff;
    1194     color: #555;
    1195     font-size: 13px;
    1196 }
    1197 
    1198 .wp-filter a {
    1199     text-decoration: none;
    1200 }
    1201 
    1202 .filter-count {
    1203     display: inline-block;
    1204     vertical-align: middle;
    1205     min-width: 4.3em;
    1206 }
    1207 
    1208 .title-count,
    1209 .filter-count .count {
    1210     display: inline-block;
    1211     position: relative;
    1212     top: -1px;
    1213     padding: 4px 10px;
    1214     -webkit-border-radius: 30px;
    1215     border-radius: 30px;
    1216     background: #777;
    1217     color: #fff;
    1218     font-size: 14px;
    1219     font-weight: 600;
    1220 }
    1221 
    1222 /* not a part of filter bar, but derived from it, so here for now */
    1223 .title-count {
    1224     display: inline;
    1225     top: -3px;
    1226     margin-left: 5px;
    1227     margin-right: 20px;
    1228 }
    1229 
    1230 .filter-links {
    1231     display: inline-block;
    1232     margin: 0;
    1233     padding: 0;
    1234 }
    1235 
    1236 .filter-links li {
    1237     display: inline-block;
    1238     margin: 0;
    1239 }
    1240 
    1241 .filter-links li > a {
    1242     display: inline-block;
    1243     margin: 0 10px;
    1244     padding: 15px 0;
    1245     border-bottom: 4px solid #fff;
    1246     color: #666;
    1247     cursor: pointer;
    1248 }
    1249 
    1250 .filter-links .current {
    1251     -webkit-box-shadow: none;
    1252     box-shadow: none;
    1253     border-bottom: 4px solid #666;
    1254     color: #222;
    1255 }
    1256 
    1257 .filter-links li > a:hover,
    1258 .filter-links li > a:focus,
    1259 .show-filters .filter-links a.current:hover,
    1260 .show-filters .filter-links a.current:focus {
    1261     color: #2ea2cc;
    1262 }
    1263 
    1264 .wp-filter .search-form {
    1265     float: right;
    1266     margin: 12px 0;
    1267     display: inline-block;
    1268 }
    1269 
    1270 .wp-filter .wp-filter-search {
    1271     margin: 0;
    1272     padding: 3px 5px;
    1273     width: 270px;
    1274     font-size: 16px;
    1275     font-weight: 300;
    1276     line-height: 1.5;
    1277 }
    1278 
    1279 .wp-filter .search-form select {
    1280     height: 33px;
    1281     vertical-align: top;
    1282 }
    1283 
    1284 .wp-filter .drawer-toggle {
    1285     display: inline-block;
    1286     margin: 0 10px;
    1287     padding: 4px 6px;
    1288     color: #666;
    1289     cursor: pointer;
    1290 }
    1291 
    1292 .wp-filter .drawer-toggle:before {
    1293     display: inline-block;
    1294     vertical-align: sub;
    1295     content: "\f111";
    1296     margin: 0 5px 0 0;
    1297     width: 16px;
    1298     height: 16px;
    1299     color: #777;
    1300     -webkit-transition: color .1s ease-in;
    1301     transition: color .1s ease-in;
    1302     font-family: "dashicons";
    1303     font-size: 16px;
    1304     line-height: 1;
    1305     text-align: center;
    1306     text-decoration: inherit;
    1307     font-weight: normal;
    1308     font-style: normal;
    1309     -webkit-font-smoothing: antialiased;
    1310 }
    1311 
    1312 .wp-filter .drawer-toggle:hover,
    1313 .wp-filter .drawer-toggle:hover:before {
    1314     color: #2ea2cc;
    1315 }
    1316 
    1317 .wp-filter .drawer-toggle.current:before {
    1318     color: #fff;
    1319 }
    1320 
    1321 .filter-drawer {
    1322     display: none;
    1323     margin: 0 -20px;
    1324     padding: 20px;
    1325     border-top: 1px solid #eee;
    1326     background: #fafafa;
    1327 }
    1328 
    1329 .show-filters .filter-drawer {
    1330     display: block;
    1331     overflow: hidden;
    1332     width: 100%;
    1333 }
    1334 
    1335 .show-filters .wp-filter .drawer-toggle:hover,
    1336 .show-filters .wp-filter .drawer-toggle:focus {
    1337     background: rgb(46, 162, 204);
    1338 }
    1339 
    1340 .show-filters .filter-links a.current {
    1341     border-bottom: none;
    1342 }
    1343 
    1344 .show-filters .wp-filter .drawer-toggle {
    1345     -webkit-border-radius: 2px;
    1346     border-radius: 2px;
    1347     border: none;
    1348     background: #777;
    1349     color: #fff;
    1350 }
    1351 
    1352 .show-filters .wp-filter .drawer-toggle:before {
    1353     color: #fff;
    1354 }
    1355 
    1356 .filter-group {
    1357     background: #fff;
    1358     border: 1px solid #e5e5e5;
    1359     box-sizing: border-box;
    1360     float: left;
    1361     margin: 0 1% 0 0;
    1362     padding: 10px;
    1363     width: calc(100% / 4 - 7px);
    1364     -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
    1365     box-shadow: 0 1px 1px rgba(0,0,0,0.04);
    1366 }
    1367 
    1368 .filter-group:last-of-type {
    1369     margin-right: 0;
    1370 }
    1371 
    1372 .filter-group.wide {
    1373     width: 38%;
    1374 }
    1375 
    1376 .filter-group h4 {
    1377     position: relative;
    1378     margin: 0;
    1379 }
    1380 
    1381 .filter-drawer ol {
    1382     margin: 20px 0 0;
    1383     list-style-type: none;
    1384     font-size: 12px;
    1385 }
    1386 
    1387 .filter-drawer li {
    1388     display: inline-block;
    1389     vertical-align: top;
    1390     margin: 5px 0;
    1391     padding-right: 25px;
    1392     width: 160px;
    1393     list-style-type: none;
    1394 }
    1395 
    1396 .filter-drawer .buttons {
    1397     margin-bottom: 20px;
    1398 }
    1399 
    1400 .filter-drawer .buttons .button span {
    1401     display: inline-block;
    1402     opacity: 0.8;
    1403     font-size: 12px;
    1404     text-indent: 10px;
    1405 }
    1406 
    1407 .wp-filter .button.clear-filters {
    1408     display: none;
    1409     margin: 0 0 0 10px;
    1410 }
    1411 
    1412 .filtered-by {
    1413     display: none;
    1414     margin: 0;
    1415 }
    1416 
    1417 .filtered-by > span {
    1418     font-weight: 600;
    1419 }
    1420 
    1421 .filtered-by a {
    1422     margin-left: 10px;
    1423 }
    1424 
    1425 .filtered-by .tags {
    1426     display: inline;
    1427 }
    1428 
    1429 .filtered-by .tag {
    1430     background: #fff;
    1431     border: 1px solid #e5e5e5;
    1432     -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
    1433     box-shadow: 0 1px 1px rgba(0,0,0,0.04);
    1434     display: inline-block;
    1435     font-size: 11px;
    1436     margin: 2px 5px;
    1437     padding: 1px 8px;
    1438 }
    1439 
    1440 .filters-applied .filter-group,
    1441 .filters-applied .filter-drawer .buttons,
    1442 .filters-applied .filter-drawer br {
    1443     display: none !important;
    1444 }
    1445 
    1446 .filters-applied .filtered-by {
    1447     display: block;
    1448 }
    1449 
    1450 .filters-applied .filter-drawer {
    1451     padding: 20px;
    1452 }
    1453 
    1454 .show-filters .content-filterable,
    1455 .show-filters.filters-applied.loading-content .content-filterable,
    1456 .loading-content .content-filterable,
    1457 .error .content-filterable {
    1458     display: none;
    1459 }
    1460 
    1461 .show-filters.filters-applied .content-filterable {
    1462     display: block;
    1463 }
    1464 
    1465 .wp-filter-search {
    1466     border: 1px solid #ddd;
    1467     box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.07 );
    1468     background-color: #fff;
    1469     color: #333;
    1470     outline: none;
    1471     -webkit-transition: 0.05s border-color ease-in-out;
    1472     transition:         0.05s border-color ease-in-out;
    1473     border-radius: 0;
    1474     margin: 0;
    1475     padding: 3px 5px;
    1476     width: 280px;
    1477     font-size: 16px;
    1478     font-weight: 300;
    1479     line-height: 1.5;
    1480 }
    1481 
    1482 .wrap .button {
    1483     display: inline-block;
    1484     text-decoration: none;
    1485     font-size: 13px;
    1486     line-height: 26px;
    1487     height: 28px;
    1488     margin: 0;
    1489     padding: 0 10px 1px;
    1490     cursor: pointer;
    1491     border: 1px solid;
    1492     -webkit-appearance: none;
    1493     border-radius: 3px;
    1494     white-space: nowrap;
    1495     box-sizing: border-box;
    1496 }
    1497 
    1498 .wrap .button-primary {
    1499     background: #2ea2cc;
    1500     border-color: #0074a2;
    1501     -webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5 ), 0 1px 0 rgba( 0, 0, 0, 0.15 );
    1502     box-shadow:         inset 0 1px 0 rgba( 120, 200, 230, 0.5 ), 0 1px 0 rgba( 0, 0, 0, 0.15 );
    1503     color: #fff;
    1504     text-decoration: none;
    1505 }
    1506 
    1507 .wrap .button-primary.hover,
    1508 .wrap .button-primary:hover,
    1509 .wrap .button-primary.focus,
    1510 .wrap .button-primary:focus {
    1511     background: #1e8cbe;
    1512     border-color: #0074a2;
    1513     -webkit-box-shadow: inset 0 1px 0 rgba(120, 200, 230, 0.6);
    1514     box-shadow:         inset 0 1px 0 rgba(120, 200, 230, 0.6);
    1515     color: #fff;
    1516 }
    1517 
    1518 .wrap .button-secondary {
    1519     color: #555;
    1520     border-color: #ccc;
    1521     background: #f7f7f7;
    1522     -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(0, 0, 0, 0.08);
    1523     box-shadow:         inset 0 1px 0 #fff, 0 1px 0 rgba(0, 0, 0, 0.08);
    1524     vertical-align: top;
    1525 }
    1526 
    1527 .wrap .button-secondary.hover,
    1528 .wrap .button-secondary:hover,
    1529 .wrap .button-secondary.focus,
    1530 .wrap .button-secondary:focus {
    1531     background: #fafafa;
    1532     border-color: #999;
    1533     color: #222;
    1534 }
    1535 
    1536 /* Secondary header design */
    1537 .main-navigation {
    1538     background: #dfdfdf;
    1539 }
    1540 
    1541 .main-navigation .menu {
    1542     font-size: 13px;
    1543     font-weight: bold;
    1544     list-style: none;
    1545     margin: 0 auto;
    1546     max-width: 960px;
    1547     padding: 10px 0;
    1548 }
    1549 
    1550 .main-navigation .menu li {
    1551     display: inline-block;
    1552     padding-left: 20px;
    1553 }
    1554 .main-navigation .menu li:first-of-type {
    1555     padding-left: 10px;
    1556 }
    1557 
    1558 .main-navigation a {
    1559     color: #636363;
    1560     font-size: 14px;
    1561 }
    1562 
    1563 .main-navigation a:hover,
    1564 .main-navigation a:focus {
    1565     color: #2ea2cc;
    1566 }
    1567 
    1568 /* Responsive design for secondary header */
    1569 @media (max-width: 740px) {
    1570     #headline h2 {
    1571         float: none;
    1572     }
    1573     .main-navigation .menu {
    1574         margin: 0;
    1575         padding: 8px 0;
    1576         width: 100%;
    1577     }
    1578 }
    1579 
    1580 /* Commercial Page Template */
    1581 .commercial .theme .more-details {
    1582     font-size: 13px;
    1583     top: 23%;
    1584     right: 5%;
    1585     left: 5%;
    1586 }
    1587 
    1588 .commercial .theme .more-details p {
    1589     margin: 0;
    1590 }
    1591 
    1592 .commercial .themes {
    1593     padding: 0;
    1594 }
    1595 
    1596 /* Themes Navigation */
    1597 .posts-navigation {
    1598     font-size: 18px;
    1599     overflow: hidden;
    1600     text-align: center;
    1601 }
    1602 
    1603 .posts-navigation .nav-links a {
    1604     padding: 8px 10px;
    1605     display: inline-block;
    1606 }
    1607 
    1608 /* Theme notices */
    1609 .notice,
    1610 .error {
    1611     background: #fff;
    1612     border: 1px solid #fff;
    1613     border-left-width: 5px;
    1614     box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, 0.1 );
    1615     font-size: 13px;
    1616     margin: 5px 15px 2px;
    1617     padding: 1px 12px;
    1618 }
    1619 
    1620 .notice p,
    1621 .error p {
    1622     margin: 0.5em 0;
    1623     padding: 2px;
    1624 }
    1625 
    1626 .notice-success {
    1627     border-color: #7ad03a;
    1628 }
    1629 
    1630 .notice-warning {
    1631     border-color: #ffba00;
    1632 }
    1633 
    1634 .notice-error,
    1635 .error {
    1636     border-color: #dd3d36;
    1637 }
    1638 
    1639 .notice-info {
    1640     background: #f7fcfe;
    1641     border-color: #2ea2cc;
    1642 }
    1643 
    1644 .wrap .notice {
    1645     margin: 5px 0 15px;
    1646 }
    1647 
    1648 /* = Favorites
    1649 ----------------*/
    1650 span.favorite {
    1651     color: #cccccc;
    1652     float: right;
    1653     cursor: pointer;
    1654 }
    1655 
    1656 span.favorite.dashicons,
    1657 span.favorite.dashicons:before {
    1658     font-size: 40px;
    1659     width: 40px;
    1660     line-height: 1.5;
    1661 }
    1662 
    1663 span.favorite:hover,
    1664 span.favorite.favorited {
    1665     color: #e02020;
    1666 }
    1667 
    1668 
    1669 /* =Media Queries
    1670 -------------------------------------------------------------- */
    1671 
    1672 /**
    1673  * HiDPI Displays
    1674  */
    1675 @media print,
    1676 (-webkit-min-device-pixel-ratio: 1.25),
    1677 (min-resolution: 120dppx) {
    1678     .wp-full-overlay .collapse-sidebar-arrow {
    1679         background-image: url(/wp-admin/images/arrows-2x.png);
    1680         -webkit-background-size: 15px 123px;
    1681         background-size: 15px 123px;
    1682     }
    1683 
    1684     .spinner,
    1685     .customize-loading #customize-container,
    1686     .theme-install-overlay .wp-full-overlay-main {
    1687         background-image: url(/wp-admin/images/spinner-2x.gif);
    1688     }
    1689 
    1690     .theme-install-overlay .wp-full-overlay-header .theme-install {
    1691         margin-top: 2px;
    1692     }
    1693 }
    1694 
    1695 @media only screen and (max-width: 1120px) {
    1696     .filter-drawer {
    1697         border-bottom: 1px solid #eee;
    1698     }
    1699 
    1700     .filter-group {
    1701         height: auto;
    1702         margin-bottom: 0;
    1703         margin-top: 5px;
    1704         width: 100%;
    1705     }
    1706 
    1707     .filter-group li {
    1708         margin: 10px 0;
    1709     }
    1710 
    1711     .theme-browser .theme {
    1712         width: 47.5%;
    1713         margin-right: 0;
    1714     }
    1715 
    1716     .theme-browser .theme:nth-child(even) {
    1717         margin-right: 0;
    1718     }
    1719 
    1720     .theme-browser .theme:nth-child(odd) {
    1721         margin-right: 5%;
    1722     }
    1723 }
    1724 
    1725 @media only screen and (max-width: 782px) {
    1726     .theme:hover .theme-actions,
    1727     .theme:focus .theme-actions,
    1728     .theme:hover .more-details,
    1729     .theme:focus .more-details {
    1730         display: none;
    1731     }
    1732 
    1733     .theme-browser.rendered .theme:hover .theme-screenshot img,
    1734     .theme-browser.rendered .theme:focus .theme-screenshot img {
    1735         opacity: 1.0;
    1736     }
    1737 
    1738     .wp-filter .search-form {
    1739         float: none;
    1740         margin: 20px 0;
    1741         width: 100%;
    1742     }
    1743 
    1744     .theme-wrap .theme-about .theme-head,
    1745     .theme-wrap .theme-about .theme-info,
    1746     .theme-wrap .theme-about .theme-meta {
    1747         float: none;
    1748         width: auto;
    1749     }
    1750 
    1751     .theme-wrap .theme-about .theme-info {
    1752         margin-bottom: 50px;
    1753     }
    1754 
    1755     .theme-wrap .theme-actions .button-primary,
    1756     .theme-wrap .theme-actions .button-secondary {
    1757         font-size: 18px;
    1758         height: auto;
    1759     }
    1760 
    1761     .theme-wrap .screenshot {
    1762         margin: 0 auto;
    1763         width: 100%;
    1764     }
    1765 }
    1766 
    1767 @media only screen and (max-width: 650px) {
    1768     .theme-wrap .theme-update,
    1769     .theme-wrap .theme-description {
    1770         margin-left: 0;
    1771     }
    1772 
    1773     .theme-wrap .theme-info {
    1774         width: 100%;
    1775     }
    1776 
    1777     .theme-wrap .theme-author {
    1778         margin: 5px 0 15px 0;
    1779     }
    1780 
    1781     .theme-wrap .current-label {
    1782         margin-top: 10px;
    1783         font-size: 13px;
    1784     }
    1785 }
    1786 
    1787 @media only screen and (max-width: 480px) {
    1788     .theme-browser .theme {
    1789         width: 100%;
    1790         margin-right: 0;
    1791     }
    1792 
    1793     .theme-browser .theme:nth-child(2n),
    1794     .theme-browser .theme:nth-child(3n) {
    1795         margin-right: 0;
    1796     }
    1797 
    1798     /* Align login info with site title. */
    1799     #headline .login {
    1800         float: left;
    1801         margin-left: 10px;
    1802     }
    1803 
    1804     .wp-filter {
    1805         padding: 0 10px;
    1806     }
    1807 
    1808     .wp-filter .filter-links {
    1809         padding: 0;
    1810     }
    1811 
    1812     /* Hide Feature Filter on mobile. */
    1813     .wp-filter .drawer-toggle {
    1814         display: none;
    1815     }
    1816 
    1817     /* Full width search form. */
    1818     .wp-filter .search-form,
    1819     .wp-filter .wp-filter-search {
    1820         width: 100%;
    1821     }
    1822 
    1823     .theme-browser .themes .theme {
    1824         margin-right: 0;
    1825     }
    1826 
    1827     .theme-wrap .theme-actions .button-primary,
    1828     .theme-wrap .theme-actions .button-secondary {
    1829         width: 100%;
    1830         margin: 5px 0;
    1831     }
    1832 
    1833     .theme-wrap .theme-name {
    1834         display: block;
    1835         margin: 0;
    1836     }
    1837 
    1838     .theme-wrap .theme-about .theme-head,
    1839     .theme-wrap .theme-about .theme-info,
    1840     .theme-wrap .theme-about .theme-info > div:not(:last-of-type),
    1841     .theme-wrap .theme-about .theme-meta > div:not(:last-of-type) {
    1842         margin-bottom: 30px;
    1843     }
    1844 
    1845     .theme-navigation .close {
    1846         padding: 19px 12px;
    1847     }
    1848 
    1849     .theme-navigation .close:before {
    1850         content: "";
    1851         margin: 0;
    1852     }
    1853 
    1854     /* Keep support and dev links stacked until they have enough room. */
    1855 
    1856     .theme-wrap .theme-support,
    1857     .theme-wrap .theme-devs {
    1858         margin: auto;
    1859         width: 100%;
    1860     }
    1861 
    1862     .posts-navigation {
    1863         margin-top: 40px;
    1864     }
    1865 }
     23Any style changes should be done in /scss and compiled via `grunt css`.
     24Thanks!
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/theme-single.php

    r6335 r6347  
    1010        <div class="theme-about hentry" itemscope itemtype="http://schema.org/CreativeWork">
    1111            <?php if ( time() - strtotime( $theme->last_updated ) > 2 * YEAR_IN_SECONDS ) { ?>
    12             <div class="theme-notice notice notice-warning">
     12            <div class="theme-notice notice notice-warning notice-alt">
    1313                <p><?php _e( 'This theme <strong>hasn&#146;t been updated in over 2 years</strong>. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.', 'wporg-themes' ); ?></p>
    1414            </div><!-- .theme-notice -->
     
    3232
    3333                <?php if ( !empty( $theme->parent ) ) { ?>
    34                 <div class="theme-notice notice notice-info">
     34                <div class="theme-notice notice notice-info notice-alt">
    3535                    <p class="parent"><?php printf( __( 'This is a child theme of %s.', 'wporg-themes' ), sprintf( '<a href="%1$s">%2$s</a>', home_url( $theme->parent['slug'] . '/' ), esc_html( $theme->parent['name'] ) ) ); ?></p>
    3636                </div>
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/view-templates/theme-single.php

    r6335 r6347  
    1010        <div class="theme-about hentry" itemscope itemtype="http://schema.org/CreativeWork">
    1111            <# if ( data.is_outdated ) { #>
    12             <div class="theme-notice notice notice-warning">
     12            <div class="theme-notice notice notice-warning notice-alt">
    1313                <p><?php _e( 'This theme <strong>hasn&#146;t been updated in over 2 years</strong>. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.', 'wporg-themes' ); ?></p>
    1414            </div><!-- .theme-notice -->
     
    3232
    3333                <# if ( data.parent ) { #>
    34                 <div class="theme-notice notice notice-info">
     34                <div class="theme-notice notice notice-info notice-alt">
    3535                    <p class="parent"><?php printf( __( 'This is a child theme of %s.', 'wporg-themes' ), sprintf( '<a href="%1$s">%2$s</a>', '{{{ data.path }}}{{{ data.parent.slug }}}/', '{{{ data.parent.name }}}' ) ); ?></p>
    3636                </div>
Note: See TracChangeset for help on using the changeset viewer.