WordPress.org
Get WordPress

Making WordPress.org

Changeset 3193


Ignore:
Timestamp:
05/20/2016 05:16:55 PM (10 years ago)
Author:
obenland
Message:

Plugin Directory: Paint roller work is done, let's bring out the brushes.

Props mapk, hugobaeta.
See #1719.

Location:
sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins
Files:
78 added
6 deleted
8 edited

Legend:

Unmodified
Added
Removed

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

    • Property svn:ignore set to
      node_modules

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

    r2499 r3193  
    1 /* jshint node:true */
     1/*global module:false*/
    22module.exports = function(grunt) {
    3         var path = require('path');
    43
    5         // Load tasks.
    6         require('matchdep').filterDev(['grunt-*']).forEach( grunt.loadNpmTasks );
    7 
    8         // Project configuration.
    94        grunt.initConfig({
    10                 rtlcss: {
     5                jshint: {
     6                        files: [
     7                                'Gruntfile.js',
     8                                'js/**/*.js'
     9                        ],
     10                        options: grunt.file.readJSON('.jshintrc')
     11                },
     12                sass: {
    1113                        options: {
    12                                 // rtlcss options
    13                                 config: {
    14                                         swapLeftRightInUrl: false,
    15                                         swapLtrRtlInUrl: false,
    16                                         autoRename: false,
    17                                         preserveDirectives: true,
    18                                         stringMap: [
    19                                                 {
    20                                                         name: 'import-rtl-stylesheet',
    21                                                         search: [ '.css' ],
    22                                                         replace: [ '-rtl.css' ],
    23                                                         options: {
    24                                                                 scope: 'url',
    25                                                                 ignoreCase: false
    26                                                         }
    27                                                 }
    28                                         ]
    29                                 },
    30                                 properties : [
    31                                         {
    32                                                 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
     14                                outputStyle: 'expanded'
    5715                        },
    58                         theme: {
    59                                 expand: true,
    60                                 ext: '-rtl.css',
    61                                 src: [
    62                                         'style.css',
    63                                 ]
     16                        dist: {
     17                                files: {
     18                                        'css/style.css': 'sass/style.scss'
     19                                }
     20                        }
     21                },
     22                watch: {
     23                        js: {
     24                                files: ['<%= jshint.files %>'],
     25                                tasks: ['jshint']
    6426                        },
    65                 },
    66                 uglify: {
    67                         options: {
    68                                 ASCIIOnly: true
    69                         },
    70                         js: {
    71                                 expand: true,
    72                                 ext: '.min.js',
    73                                 src: [ 'js/theme.js' ]
     27                        css: {
     28                                files: ['**/*.scss'],
     29                                tasks: ['sass']
    7430                        }
    7531                }
    7632        });
    7733
    78         // Register tasks.
     34        grunt.loadNpmTasks('grunt-sass');
     35        grunt.loadNpmTasks('grunt-contrib-jshint');
     36        grunt.loadNpmTasks('grunt-contrib-watch');
    7937
    80         grunt.registerTask( 'build', [
    81                 'rtlcss',
    82                 'uglify'
    83         ] );
    84 
    85         // Default task.
    86         grunt.registerTask('default', ['build']);
    87 
     38        grunt.registerTask('default', ['jshint', 'sass']);
    8839};
    89 

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

    r3009 r3193  
    11<?php
    2 namespace WordPressdotorg\Plugin_Directory\Theme;
    3 
    42/**
    53 * The template for displaying the footer.
    64 *
    7  * @package wporg-plugins
     5 * Contains the closing of the #content div and all content after.
     6 *
     7 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
     8 *
     9 * @package WordPressdotorg\Plugin_Directory\Theme
    810 */
    911
    10 echo '</div>';
     12namespace WordPressdotorg\Plugin_Directory\Theme;
     13?>
     14
     15        </div><!-- #content -->
     16
     17<?php
    1118
    1219require WPORGPATH . 'footer.php';

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

    r3009 r3193  
    11<?php
     2/**
     3 * Plugin Directory functions and definitions.
     4 *
     5 * @link https://developer.wordpress.org/themes/basics/theme-functions/
     6 *
     7 * @package WordPressdotorg\Plugin_Directory\Theme
     8 */
     9
    210namespace WordPressdotorg\Plugin_Directory\Theme;
     11use WordPressdotorg\Plugin_Directory\Plugin_Directory;
    312
    413/**
    5  * WP.org Themes' functions and definitions.
     14 * Sets up theme defaults and registers support for various WordPress features.
    615 *
    7  * @package wporg-plugins
     16 * Note that this function is hooked into the after_setup_theme hook, which
     17 * runs before the init hook. The init hook is too late for some features, such
     18 * as indicating support for post thumbnails.
    819 */
     20function setup() {
    921
    10 function wporg_plugins_setup() {
    11         global $themes_allowedtags;
     22        // Add default posts and comments RSS feed links to head.
     23        add_theme_support( 'automatic-feed-links' );
    1224
    13         load_theme_textdomain( 'wporg-plugins' );
     25        // This theme uses wp_nav_menu() in one location.
     26        register_nav_menus( array(
     27                'primary' => esc_html__( 'Primary', 'wporg-plugins' ),
     28        ) );
    1429
    15         include_once __DIR__ . '/template-tags.php';
     30        /*
     31         * Switch default core markup for search form, comment form, and comments
     32         * to output valid HTML5.
     33         */
     34        add_theme_support( 'html5', array(
     35                'search-form',
     36                'comment-form',
     37                'comment-list',
     38                'gallery',
     39                'caption',
     40        ) );
    1641
    17         add_theme_support( 'html5', array(
    18                 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption'
     42        // Set up the WordPress core custom background feature.
     43        add_theme_support( 'custom-background', apply_filters( 'wporg_plugins_custom_background_args', array(
     44                'default-color' => 'ffffff',
     45                'default-image' => '',
     46        ) ) );
     47}
     48add_action( 'after_setup_theme', __NAMESPACE__ . '\setup' );
     49
     50/**
     51 * Set the content width in pixels, based on the theme's design and stylesheet.
     52 *
     53 * Priority 0 to make it available to lower priority callbacks.
     54 *
     55 * @global int $content_width
     56 */
     57function content_width() {
     58        $GLOBALS['content_width'] = apply_filters( 'wporg_plugins_content_width', 640 );
     59}
     60add_action( 'after_setup_theme', __NAMESPACE__ . '\content_width', 0 );
     61
     62/**
     63 * Register widget area.
     64 *
     65 * @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar
     66 */
     67function widgets_init() {
     68
     69        register_sidebar( array(
     70                'name'          => esc_html__( 'Front Page Sidebar', 'wporg-plugins' ),
     71                'id'            => 'sidebar-front-page',
     72                'description'   => esc_html__( 'Appears on the bottom of the front page.', 'wporg-plugins' ),
     73                'before_widget' => '<div id="%1$s" class="widget %2$s">',
     74                'after_widget'  => '</div>',
     75                'before_title'  => '<h4 class="widget-title">',
     76                'after_title'   => '</h4>',
    1977        ) );
    2078
    2179        register_sidebar( array(
    22                 'name'          => 'Single Plugin View Sidebar',
    23                 'id'            => 'single-plugin-sidebar',
     80                'name'          => esc_html__( 'Sidebar', 'wporg-plugins' ),
     81                'id'            => 'sidebar-1',
     82                'description'   => esc_html__( 'Add widgets here.', 'wporg-plugins' ),
    2483                'before_widget' => '<div id="%1$s" class="widget %2$s">',
    2584                'after_widget'  => '</div>',
     85                'before_title'  => '<h3 class="widget-title">',
     86                'after_title'   => '</h3>',
    2687        ) );
    27 
    28         // No need for canonical lookups
    29         remove_action( 'template_redirect', __NAMESPACE__ . '\wp_old_slug_redirect' );
    3088}
    31 add_action( 'after_setup_theme', __NAMESPACE__ . '\wporg_plugins_setup' );
     89add_action( 'widgets_init', __NAMESPACE__ . '\widgets_init' );
    3290
    3391/**
    3492 * Enqueue scripts and styles.
    3593 */
    36 function wporg_plugins_scripts() {
    37         $script_debug = true || defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG;
    38         $suffix       = $script_debug ? '' : '.min';
     94function scripts() {
     95        wp_enqueue_style( 'wporg-plugins-style', get_template_directory_uri() . '/css/style.css' );
    3996
    40         // Concatenates core scripts when possible.
    41         if ( ! $script_debug ) {
    42                 $GLOBALS['concatenate_scripts'] = true;
    43         }
     97        wp_enqueue_script( 'wporg-plugins-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );
    4498
    45         $stylesheet = get_stylesheet_uri();
    46         if ( is_rtl() ) {
    47 //              $stylesheet = str_replace( '.css', '-rtl.css', $stylesheet ); // TODO, not being generated yet
    48         }
    49         wp_enqueue_style( 'wporg-plugins', $stylesheet, array(), time() );
     99        wp_enqueue_script( 'wporg-plugins-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );
     100}
     101add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\scripts' );
    50102
    51         // No Jetpack styles needed.
    52         add_filter( 'jetpack_implode_frontend_css', '__return_false' );
     103/**
     104 * Don't split plugin content in the front-end.
     105 */
     106function content() {
     107        remove_filter( 'the_content', array( Plugin_Directory::instance(), 'filter_post_content_to_correct_page' ), 1 );
    53108}
    54 add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\wporg_plugins_scripts' );
     109add_action( 'template_redirect', __NAMESPACE__ . '\content' );
    55110
    56 function wporg_plugins_body_class( $classes ) {
    57         $classes[] = 'plugins-directory';
    58         return $classes;
    59 }
    60 add_filter( 'body_class', __NAMESPACE__ . '\wporg_plugins_body_class' );
     111/**
     112 * Custom template tags for this theme.
     113 */
     114require get_template_directory() . '/inc/template-tags.php';
     115
     116/**
     117 * Customizer additions.
     118 */
     119require get_template_directory() . '/inc/customizer.php';

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

    r3009 r3193  
    11<?php
    2 namespace WordPressdotorg\Plugin_Directory\Theme;
    3 
    42/**
    53 * The header for our theme.
    64 *
    7  * @package wporg-plugins
     5 * This is the template that displays all of the <head> section and everything up until <div id="content">
     6 *
     7 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
     8 *
     9 * @package WordPressdotorg\Plugin_Directory\Theme
    810 */
    911
     12namespace WordPressdotorg\Plugin_Directory\Theme;
     13
    1014$GLOBALS['pagetitle'] = __( 'Plugin Directory &mdash; Free WordPress Plugins', 'wporg-plugins' );
     15$description = get_bloginfo( 'description', 'display' );
    1116
    1217require WPORGPATH . 'header.php';
    1318?>
     19<div id="page" class="site">
     20        <a class="skip-link screen-reader-text" href="#main"><?php esc_html_e( 'Skip to content', 'wporg-plugins' ); ?></a>
    1421
    15 <div id="headline">
    16         <div class="wrapper">
    17                 <h2><a href="<?php echo home_url('/'); ?>"><?php _e( 'Plugin Directory', 'wporg-plugins' ); ?></a></h2>
    18                 <?php
    19                 $items = array();
    20                 if ( is_user_logged_in() ) {
    21                         $items[] = sprintf(
    22                                 __( 'Welcome, %s', 'wporg-plugins' ),
    23                                 sprintf(
    24                                         '<a href="https://profiles.wordpress.org/%s">%s</a>',
    25                                         wp_get_current_user()->user_nicename,
    26                                         wp_get_current_user()->display_name
    27                                 )
    28                         );
    29                         if ( true /* user_has_plugins */ ) {
    30                                 $items[] = '<a href="' . admin_url( 'edit.php?post_type=plugin' ) . '">' . __( 'Manage My Plugins', 'wporg-plugins' ) . '</a>';
    31                         }
    32                         $items[] = '<a href="https://login.wordpress.org/logout">' . __( 'Log Out', 'wporg-plugins' ) . '</a>';
    33                 } else {
    34                         $items[] = '<a href="https://login.wordpress.org/?redirect_to=' . urlencode( wporg_plugins_self_link() ) . '">' . __( 'Log In', 'wporg-plugins' ) . '</a>';
    35                 }
    36                 echo '<p class="login">' . implode( ' | ', $items ) . '</p>';
    37                 ?>
    38         </div>
    39 </div>
     22        <header id="masthead" class="site-header" role="banner">
     23                <div class="site-branding">
     24                        <?php if ( is_front_page() && is_home() ) : ?>
     25                                <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
     26                        <?php else : ?>
     27                                <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
     28                        <?php endif; ?>
    4029
    41 <div id="pagebody">
     30                        <?php if ( is_home() || is_search() ) :
     31                                if ( $description || is_customize_preview() ) : ?>
     32                                <p class="site-description"><?php echo $description; /* WPCS: xss ok. */ ?></p>
     33                                        <?php endif; ?>
     34                                <?php get_search_form(); ?>
     35                        <?php else : ?>
     36                                <nav id="site-navigation" class="main-navigation" role="navigation">
     37                                        <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', '_s' ); ?></button>
     38                                        <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?>
     39                                </nav><!-- #site-navigation -->
     40                        <?php endif; ?>
     41                </div><!-- .site-branding -->
     42        </header><!-- #masthead -->
     43
     44        <div id="content" class="site-content">

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

    r3075 r3193  
    11<?php
     2/**
     3 * The main template file.
     4 *
     5 * This is the most generic template file in a WordPress theme
     6 * and one of the two required files for a theme (the other being style.css).
     7 * It is used to display a page when nothing more specific matches a query.
     8 * E.g., it puts together the home page when no home.php file exists.
     9 *
     10 * @link https://codex.wordpress.org/Template_Hierarchy
     11 *
     12 * @package WordPressdotorg\Plugin_Directory\Theme
     13 */
     14
    215namespace WordPressdotorg\Plugin_Directory\Theme;
    316
    4 get_header();
    5 ?>
     17get_header(); ?>
    618
    7 <?php get_template_part( 'filter-bar' ); ?>
     19        <main id="main" class="site-main" role="main">
    820
    9 <?php get_template_part( 'pagination-bar' ); ?>
     21        <?php
     22                if ( have_posts() ) :
     23                        if ( is_home() && ! is_front_page() ) :
     24        ?>
     25                <header>
     26                        <h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
     27                </header>
    1028
    11 <div class="wrapper">
    12         <div class="col-12" itemscope itemtype="http://schema.org/SoftwareApplication">
    13                 <?php get_template_part( 'view-intro' ); ?>
     29        <?php
     30                        endif;
    1431
    15                 <div class="plugin-group">
    16                
    17                 <?php
    18                         if ( have_posts() ) {
    19                                 while ( have_posts() ) {
    20                                         the_post();
    21                                         get_template_part( 'plugin-card' );
    22                                 }
    23                         } else {
    24                                 echo '<p class="no-plugin-results">No plugins match your request.</p>';
    25                         }
    26                 ?>
     32                        /* Start the Loop */
     33                        while ( have_posts() ) :
     34                                the_post();
    2735
    28                 </div>
     36                                get_template_part( 'template-parts/plugin', 'index' );
     37                        endwhile;
    2938
    30         </div>
    31 </div>
     39                        the_posts_pagination();
    3240
    33 <?php get_template_part( 'pagination-bar' ); ?>
     41                else :
     42                        get_template_part( 'template-parts/content', 'none' );
     43                endif;
     44        ?>
    3445
    35 <br class="clear" />
     46        </main><!-- #main -->
     47
    3648<?php
    3749get_footer();

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

    r3009 r3193  
    11<?php
     2/**
     3 * The template for displaying all pages.
     4 *
     5 * This is the template that displays all pages by default.
     6 * Please note that this is the WordPress construct of pages
     7 * and that other 'pages' on your WordPress site may use a
     8 * different template.
     9 *
     10 * @link https://codex.wordpress.org/Template_Hierarchy
     11 *
     12 * @package WordPressdotorg\Plugin_Directory\Theme
     13 */
     14
    215namespace WordPressdotorg\Plugin_Directory\Theme;
    316
    4 get_header();
    5 ?>
     17get_header(); ?>
    618
    7 <?php the_post(); ?>
     19        <main id="main" class="site-main" role="main">
    820
    9 <?php get_template_part( 'filter-bar' ); ?>
     21                <?php
     22                while ( have_posts() ) : the_post();
    1023
    11 <div class="wrapper">
    12         <div class="col-12" itemscope itemtype="http://schema.org/SoftwareApplication">
    13                 <h2><?php the_title(); ?></h2>
    14                 <?php the_content(); ?>
    15         </div>
    16 </div>
     24                        get_template_part( 'template-parts/content', 'page' );
     25                endwhile; // End of the loop.
     26                ?>
    1727
    18 <br class="clear" />
     28        </main><!-- #main -->
     29
    1930<?php
    2031get_footer();

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

    r3075 r3193  
    1 /*
    2  * Theme Name: WordPress.org Plugins
    3  * Theme URI: https://wordpress.org/plugins
    4  * Author: wordpressdotorg
    5  * Author URI: https://wordpress.org
    6  * Description: Theme for the WordPress.org plugins directory
    7  * Version: 0.1-alpha
    8  * License: GNU General Public License v2 or later
    9  * License URI: http://www.gnu.org/licenses/gpl-2.0.html
    10  */
     1/*!
     2Theme Name: WordPress.org Plugins
     3Theme URI: https://wordpress.org/plugins
     4Author: wordpressdotorg
     5Author URI: https://wordpress.org
     6Description: Theme for the WordPress.org Plugin Directory.
     7Version: 1
     8License: GNU General Public License v2 or later
     9License URI: http://www.gnu.org/licenses/gpl-2.0.html
     10Text Domain: wporg-plugins
    1111
    12 body {
    13         font-family: "Open Sans", sans-serif;
    14 }
     12This theme, like WordPress, is licensed under the GPL.
     13Use it to make something cool, have fun, and share what you've learned with others.
    1514
    16 .error {
    17         background-color: #fdd;
    18         border: 1px solid #c66;
    19         padding: 8px;
    20 }
     15WordPress.org Plugins is based on Underscores http://underscores.me/, (C) 2012-2016 Automattic, Inc.
     16Underscores is distributed under the terms of the GNU GPL v2 or later.
    2117
    22 .info-marker {
    23         color: #555;
    24 }
    25 
    26 #wporg-footer, #footer, #doily {
    27         clear: both;
    28 }
    29 
    30 .right {
    31         float: right !important;
    32 
    33 }
    34 
    35 .left {
    36         float: left !important;
    37 }
    38 
    39 h4.plugin-tags, ul.column-list { position: relative; }
    40 
    41 ul.column-list a.more { right: 3ex; }
    42 
    43 #content p a { border-bottom: none; }
    44 
    45 h3#count {
    46         font: 1em/25px Georgia,"Bitstream Vera Serif","Times New Roman",serif;
    47         letter-spacing: 1px;
    48         text-transform: uppercase;
    49         font-weight: normal;
    50         color: #888;
    51         float: left;
    52 }
    53 
    54 h3#count strong {
    55         font-size: 1.4em;
    56         font-weight: normal;
    57         color: #000;
    58 }
    59 
    60 #plugins-search {
    61         margin-top: 11px;
    62 }
    63 
    64 #plugins-search input.text {
    65         width: 300px;
    66         font-size: 12px;
    67 }
    68 
    69 #plugins-search label input {
    70         margin: 0 .4em;
    71         vertical-align: middle;
    72 }
    73 
    74 #side-search {
    75         margin: -10px 0 22px;
    76         width: 100%;
    77         obackground-color: #eee;
    78 }
    79 
    80 #side-search div {
    81         padding: 5px 0 0;
    82 }
    83 
    84 #side-search input.text {
    85         font-size: 12px;
    86         height: 2em;
    87         width: 100%;
    88         -moz-box-sizing: border-box;
    89         -webkit-box-sizing: border-box;
    90         box-sizing: border-box;
    91         obackground-color: #fff;
    92 }
    93 
    94 #side-search input.button {
    95         float: right;
    96         margin-top: 5px;
    97 }
    98 
    99 #plugin-info pre {
    100         overflow: auto;
    101         max-width: 525px;
    102         clear: both;
    103 }
    104 
    105 .unmarked-list, .unmarked-list li {
    106         text-indent: 0;
    107         list-style: none;
    108         margin-left: 0;
    109 }
    110 
    111 body #plugin-info .unmarked-list { padding: 0 0 0 2ex; }
    112 
    113 #pagebody h2 {
    114         font-size: 18px;
    115         line-height: 1.2em;
    116         color: #333;
    117         font-weight: bold;
    118         margin-bottom: 11px;
    119 }
    120 
    121 .block h3.head {
    122         color: #444;
    123         font-weight: bold;
    124         height: 12px;
    125         line-height: 1;
    126         padding: 8px 12px;
    127         font-size: 12px !important;
    128         margin-bottom: 12px;
    129 }
    130 
    131 .column .head {
    132         font-size: 18px;
    133         line-height: 1;
    134         margin: 1em 0 .5em;
    135         padding: 0;
    136 }
    137 
    138 .chart object {
    139         margin-left: -18px;
    140 }
    141 
    142 div.column h3.head a, div.column h3.head a:hover span {
    143         color: #2D2D2D;
    144 }
    145 div.column h3.head a:hover {
    146         color: #036;
    147         text-decoration: underline;
    148 }
    149 div.column h3.head a span {
    150         color: #036;
    151         font-weight: bold;
    152 }
    153 
    154 /* Blocks */
    155 
    156 .block-content {
    157         margin-bottom: 2em;
    158 }
    159 
    160 .block-content h4 {
    161         border: none !important;
    162         margin-bottom: 0;
    163         padding-bottom: 0;
    164         font-size: 14px;
    165 }
    166 
    167 .block-content .button {
    168         font-weight: normal !important;
    169         float: right;
    170         margin-top: -17px;
    171 }
    172 
    173 .block-content .button a {
    174         font-weight: normal !important;
    175 }
    176 
    177 /* Columns */
    178 
    179 ul.column-list {
    180         list-style: square;
    181         font-size: 12px;
    182 }
    183 
    184 /* Buttons */
    185 
    186 div.button-holder {
    187         position: relative;
    188         height: 28px;
    189 }
    190 
    191 div.button-holder-l {
    192         height: 48px;
    193 }
    194 
    195 span.btn-s {
    196         background: url("btn-s-r.gif") top right no-repeat;
    197         width: 80px;
    198         float: left;
    199         margin-right: 4px;
    200 }
    201 
    202 span.btn-s a {
    203         background: url("btn-s-l.gif") top left no-repeat;
    204         height: 20px;
    205         line-height: 19px;
    206 }
    207 
    208 span.btn-m {
    209         background: url("btn-m-r.gif") top right no-repeat;
    210 }
    211 
    212 span.btn-m a {
    213         background: url("btn-m-l.gif") top left no-repeat;
    214         height: 28px;
    215         line-height: 27px;
    216 }
    217 
    218 span.btn-l {
    219         background: url("btn-l-r.gif") top right no-repeat;
    220 }
    221 
    222 span.btn-l a {
    223         background: url("btn-l-l.gif") top left no-repeat;
    224         height: 48px;
    225         font-size: 14px;
    226         line-height: 47px;
    227 }
    228 
    229 /* Featured */
    230 
    231 #featured {
    232         background-color: #fffeeb;
    233         border-top: 1px solid #d9d8c8;
    234         border-bottom: 1px solid #d9d8c8;
    235 }
    236 
    237 #featured .head {
    238         background-color: #f2f1df;
    239 }
    240 
    241 #featured h4, #featured h4 a {
    242         font-size: 26px;
    243         font-weight: normal;
    244 }
    245 
    246 /* Plugin Info */
    247 .col-10 .col-3 {
    248         margin: 0 0 0 28px;
    249 }
    250 #plugin-title {
    251         position: relative;
    252         margin: 0;
    253 }
    254 #plugin-title.with-banner {
    255         width: 772px;
    256         height: 250px;
    257 }
    258 #plugin-title.with-banner div {
    259         position: absolute;
    260         left: 0;
    261         right: 0;
    262         bottom: 0;
    263         padding: 20px 30px;
    264         background: rgba( 0, 0, 0, 0.6 );
    265 }
    266 #plugin-title.with-banner .vignette {
    267         top: 0;
    268         background: transparent;
    269         -webkit-box-shadow: inset 0 0 50px 4px rgba( 0, 0, 0, 0.2 ), inset 0 -1px 0 rgba( 0, 0, 0, 0.1 );
    270         -moz-box-shadow: inset 0 0 50px 4px rgba( 0, 0, 0, 0.2 ), inset 0 -1px 0 rgba( 0, 0, 0, 0.1 );
    271         box-shadow: inset 0 0 50px 4px rgba( 0, 0, 0, 0.2 ), inset 0 -1px 0 rgba( 0, 0, 0, 0.1 );
    272 }
    273 
    274 #plugin-title h2 {
    275         font-family: "Helvetica Neue", sans-serif;
    276         font-size: 24px;
    277         font-weight: bold;
    278         margin: 0.5em;
    279 }
    280 
    281 #plugin-title.with-banner h2 {
    282         font-size: 30px;
    283 
    284         max-width: 682px;
    285         position: absolute;
    286         left: 30px;
    287         bottom: 20px;
    288         padding: 8px 15px;
    289         margin: 0;
    290         margin-bottom: 4px;
    291 
    292         color: #fff;
    293         background: rgba( 30, 30, 30, 0.9 );
    294         text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.4 );
    295 
    296         -webkit-box-shadow: 0 0 30px rgba( 255, 255, 255, 0.1 );
    297         -moz-box-shadow: 0 0 30px rgba( 255, 255, 255, 0.1 );
    298         box-shadow: 0 0 30px rgba( 255, 255, 255, 0.1 );
    299 
    300         -webkit-border-radius: 8px;
    301         border-radius: 8px;
    302 }
    303 
    304 #plugin-description {
    305         overflow: hidden;
    306         padding: 30px 15px 55px 30px;
    307         font-size: 16px;
    308         line-height: 24px;
    309         margin: 0 0 30px;
    310         background: #eee;
    311         border-top: 1px solid #fcfcfc;
    312         text-shadow: 0 1px 1px #fff;
    313         -webkit-box-shadow: inset 0 0px 42px 0px rgba( 100, 100, 100, 0.1 );
    314         -moz-box-shadow: inset 0 0px 42px 0px rgba( 100, 100, 100, 0.1 );
    315         box-shadow: inset 0 0px 42px 0px rgba( 100, 100, 100, 0.1 );
    316 }
    317 
    318 #plugin-description .shortdesc {
    319         width: 480px;
    320         float: left;
    321         margin-bottom: 0;
    322         font-family: Georgia,"Bitstream Vera Serif","Times New Roman",serif;
    323 }
    324 
    325 #plugin-description p.button,
    326 body.trac .description-right p,
    327 .col-3 p.button {
    328         display: block;
    329         text-align: center;
    330         padding: 0 12px;
    331         background: #d54e21;
    332         color: #fff;
    333         -moz-border-radius: 3px;
    334         border-radius: 3px;
    335         border: none;
    336 }
    337 
    338 #plugin-description p.button a,
    339 body.trac .description-right p a,
    340 .col-3 p.button a {
    341         font-size: 15px;
    342         color: #fff;
    343         display: block;
    344         text-shadow: rgba(0,0,0,0.5) 0 1px 0;
    345 }
    346 
    347 p.button a:hover {
    348         color: #ffac90;
    349         border: none;
    350 }
    351 
    352 body.trac #plugin-description p,
    353 #plugin-description p.button {
    354         float: right;
    355         min-width: 182px;
    356         margin-top: -8px;
    357         margin-bottom: 0;
    358 }
    359 
    360 #plugin-info {
    361         margin-top: -70px;
    362         margin-bottom: 25px;
    363 }
    364 
    365 #plugin-info .head-big {
    366         overflow: hidden;
    367         width: 743px;
    368         height: 30px;
    369         padding: 10px 0 0 29px;
    370         margin-bottom: 29px;
    371 }
    372 
    373 #plugin-info.theme-info .head-big {
    374         background-color: #eee;
    375         height: 35px;
    376         padding: 0 0 0 6px;
    377         margin-bottom: 12px;
    378         width: 100%;
    379 }
    380 
    381 #plugin-info.theme-info {
    382         margin-top: 10px;
    383         width: auto;
    384 }
    385 
    386 #plugin-info ul#sections {
    387         margin: 0;
    388         padding: 0;
    389         list-style: none;
    390         text-indent: 0;
    391 }
    392 
    393 #plugin-info.theme-info ul#sections {
    394         margin: 5px 0 0;
    395 }
    396 
    397 #plugin-info ul#sections li {
    398         font-size: 13px;
    399         line-height: 1;
    400         display: block;
    401         float: left;
    402         padding: 8px 8px 9px;
    403         margin: 0;
    404 }
    405 
    406 #plugin-info ul#sections li.current {
    407         padding-top: 7px;
    408         background-color: #fff;
    409 
    410         border-style: solid;
    411         border-width: 1px 1px 0 1px;
    412         border-color: #d7d7d7;
    413 
    414         -webkit-box-shadow: 0 0 8px 0px rgba( 100, 100, 100, 0.12 );
    415         -moz-box-shadow: 0 0 8px 0px rgba( 100, 100, 100, 0.12 );
    416         box-shadow: 0 0 8px 0px rgba( 100, 100, 100, 0.12 );
    417 
    418         -webkit-border-top-left-radius: 3px;
    419         -webkit-border-top-right-radius: 3px;
    420         border-top-left-radius: 3px;
    421         border-top-right-radius: 3px;
    422 }
    423 
    424 #plugin-info h4, #plugin-info h3 {
    425         color: #111;
    426         font-weight: bold;
    427         margin-top: 1.5em;
    428 }
    429 
    430 #plugin-info h4 {
    431         font-size: 14px;
    432         margin: 0;
    433 }
    434 
    435 #plugin-info h4.author {
    436         margin: 0 0 12px;
    437         border-bottom: none;
    438 }
    439 
    440 #plugin-info.frequently-asked-questions h4, #plugin-info h3 {
    441         font-size: 16px;
    442 }
    443 
    444 #plugin-info .block-content, #plugin-info .block-content p {
    445         clear: left;
    446         font-size: 13px;
    447 }
    448 
    449 #plugin-tags,
    450 #theme-languages {
    451         font-size: 12px;
    452         margin: 16px 0;
    453 }
    454 
    455 /* FYI */
    456 
    457 #fyi {
    458         margin-bottom: 1em;
    459 }
    460 
    461 #fyi .head {
    462         padding-left: 0;
    463 }
    464 
    465 #fyi .block-content {
    466         font-size: 12px;
    467         padding-top: 0;
    468 }
    469 
    470 #fyi ul {
    471         list-style: none;
    472         padding-bottom: 12px;
    473 }
    474 
    475 #fyi ul li {
    476         text-indent: -16px;
    477         font-size: 12px;
    478         width: 175px;
    479 }
    480 
    481 #fyi ul li.plugin-avatars {
    482         text-indent:0px;
    483         margin:0 0 0 -9px;
    484         padding:0;
    485 }
    486 
    487 .plugin-avatars a img {
    488         padding: 0 3px;
    489 }
    490 
    491 .col-3 .postform h3 {
    492         font-size: 12px;
    493         padding-bottom: 5px;
    494         margin-bottom: 10px;
    495         border-bottom: 1px solid #dadada;
    496 }
    497 
    498 .col-3 .postform ol li {
    499         line-height: 1.6em;
    500         font-size: 12px;
    501 }
    502 
    503 .col-3 .postform p {
    504         font-size: 10px;
    505         line-height: 1.6em;
    506         padding-bottom: 22px;
    507 }
    508 
    509 /* Tag and Author Pages */
    510 div.plugin-block {
    511         margin: .5em 0 0;
    512 }
    513 
    514 div.plugin-block h3 {
    515         margin-top: 1em;
    516 }
    517 
    518 div.plugin-block p {
    519         padding: 0;
    520         margin: 0 0 .5em;
    521 }
    522 
    523 div.plugin-block ul.plugin-meta {
    524         list-style: none !important;
    525         font-size: 12px;
    526         line-height: 1;
    527         color: #111;
    528         margin: .4em 0 0 !important;
    529         height: 19px;
    530         padding: 0;
    531 }
    532 
    533 div.plugin-block ul.plugin-meta li {
    534         float: left;
    535         margin: 0 8px 0 0 !important;
    536         text-indent: 0;
    537         min-height: 19px;
    538 }
    539 
    540 div.plugin-block div.star-holder {
    541         float: left;
    542         margin: -3px 0 0 .5ex;
    543 }
    544 
    545 /* Tags Page */
    546 #hottags {
    547         font-family: Georgia,"Bitstream Vera Serif","Times New Roman",serif;
    548         margin: 2em 0 0;
    549         text-align: justify;
    550         line-height: 2em;
    551 }
    552 
    553 #hottags a {
    554         font-weight: normal;
    555 }
    556 
    557 div#sidebar h3 {
    558         position: relative;
    559 }
    560 div#sidebar h3 a {
    561         font-weight: bold;
    562 }
    563 div#sidebar div ul {
    564         border-bottom: none;
    565 }
    566 
    567 div#history {
    568         width: 150px;
    569         margin-left: 20px;
    570         margin-bottom: 22px;
    571 }
    572 div#history table {
    573         width: 150px;
    574         border-collapse:collapse;
    575         border-spacing:0;
    576 }
    577 div#history table * {
    578         text-align: left;
    579 }
    580 div#history table tr {
    581         border-bottom: 1px solid #ccc;
    582 }
    583 div#history table th {
    584         font-size: 0.8em;
    585         color: #666;
    586         font-weight: normal;
    587 }
    588 div#history table td {
    589         font-weight: bold;
    590 }
    591 div#history table th, div#history table td {
    592         padding: 5px 0;
    593 }
    594 div#history table tr.last-child {
    595         border-bottom: none;
    596 }
    597 #related {
    598         clear: both;
    599         border-top: 1em solid #fff;
    600 }
    601 #related ul {
    602         font-size: 0.9em;
    603         padding: 0 0 0 18px;
    604 }
    605 #related ul li {
    606         margin: 0;
    607 }
    608 
    609 ol.screenshots {
    610         clear: both;
    611         list-style: none;
    612         margin: 0 !important;
    613         padding: 0;
    614 }
    615 ol.screenshots li {
    616         padding-bottom: 35px;
    617 }
    618 ol.screenshots li img {
    619         border: 1px solid #dadada;
    620 }
    621 ol.screenshots li p {
    622         margin: 0 !important;
    623         padding: 0;
    624         font: italic 0.85em/1.4em "Lucida Sans", "Lucida Grande", Verdana, sans-serif !important;
    625 }
    626 
    627 #pagebody ul.translation-details {
    628         margin-left: 0;
    629 }
    630 
    631         .translation-details-row {
    632                 background-color: #f4f4f4;
    633                 list-style: none outside none;
    634                 padding: 15px 20px 12px 20px;
    635         }
    636 
    637                 .translation-details-row-alternate {
    638                         background-color: inherit;
    639                 }
    640 
    641 /* Get Hosted */
    642 
    643 div#get-hosted {
    644         clear: both;
    645         background-color: #EDEDFF;
    646         border-top: 1.5em solid #fff;
    647 }
    648 
    649 div#get-hosted h3.head {
    650         border-top: 1px solid #CACAD9;
    651         background-color: #E1E1F2;
    652 }
    653 
    654 /* Change site-wide stuff */
    655 
    656 form .alt { background: #eee }
    657 
    658 #thread li.alt {
    659         border-top: 1px solid #ccc;
    660         border-bottom: 1px solid #ccc;
    661 }
    662 
    663 #thread { background-color: #fff; }
    664 
    665 #thread li { padding: 1em .8em }
    666 
    667 .threadauthor{
    668         position: static;
    669         width: auto;
    670         overflow: visible;
    671 }
     18Normalizing styles have been helped along thanks to the fine work of
     19Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
    67220
    67321
    674 /* About */
    67522
    676 #about h3 {
    677         font-size: 22px;
    678 }
     23PLEASE DO NOT EDIT THIS FILE.
    67924
    680 #about code { background-color: transparent; color: #000; }
    681 
    682 #about th[scope=row] { text-align: left; }
    683 
    684 .prompt { color: green; }
    685 .comment { color: maroon; }
    686 .stdout { color: #222; }
    687 
    688 dl dt { color: #000; }
    689 dl dd { margin-bottom: 1em; }
    690 
    691 
    692 #admin {
    693         background-color: #FFEBFE;
    694         border-top: 1px solid #D9C8D8;
    695 }
    696 
    697 #admin h3.head {
    698         background-color: #F2DFF1;
    699 }
    700 
    701 #admin-forums {
    702         border-collapse: collapse;
    703 }
    704 
    705 #admin-forums .alt {
    706         background-color: transparent;
    707 }
    708 
    709 #admin-forums .num {
    710         text-align: right;
    711 }
    712 
    713 #admin-forums th, #admin-forums td {
    714         padding: 0 12px;
    715 }
    716 
    717 div.has-plugins {
    718         background-color: #FFC0CB;
    719 }
    720 
    721 div.alt.has-plugins {
    722         background-color: #FFB6C1;
    723 }
    724 
    725 div.emailed-author {
    726         background-color: #FFCC99;
    727 }
    728 div.alt.emailed-author {
    729         background-color: #FFCC66;
    730 }
    731 
    732 div.pending textarea {
    733         width: 529px;
    734         margin: 0 8px 8px;
    735 }
    736 
    737 .video {
    738         margin: 0 0 22px;
    739         text-align: center;
    740 }
    741 
    742 .tc-warning, .tc-required, .tc-fail {
    743         color:red;
    744 }
    745 
    746 .tc-recommended, .tc-pass {
    747         color: green;
    748 }
    749 
    750 .tc-info {
    751         color: blue;
    752 }
    753 
    754 @media screen and (max-width:960px) {
    755     #sidebar {
    756         display:none;
    757     }
    758         .col-10, .col-10 .col-3 {
    759                 -moz-box-sizing: border-box;
    760                 -webkit-box-sizing: border-box;
    761                 box-sizing: border-box;
    762                 width: 100%;
    763                 margin: 5px 0;
    764                 padding: 0 15px;
    765         }
    766         .col-7 {
    767                 width: 100%;
    768         }
    769         .plugin-head-with-banner {
    770                 background-color: #eee;
    771         }
    772         #plugin-title.with-banner {
    773                 margin: 0 auto;
    774                 width: 100%;
    775                 max-width: 772px;
    776                 background-size: 100%;
    777                 height: 0;
    778                 padding-bottom: 32%;
    779                 font-size: 20px;
    780         }
    781         #plugin-title.with-banner h2 {
    782                 font-size: 20px;
    783                 line-height: 1em;
    784                 bottom: 4%;
    785                 left: 3%;
    786         }
    787         #pagebody .col-2 > .submenu:nth-of-type(2) {
    788                 overflow: hidden;
    789         }
    790         #pagebody .col-2 .submenu:nth-of-type(2) li {
    791                 display: block;
    792                 width: 50%;
    793                 float: left;
    794         }
    795         .plugin-authors > div {
    796                 display: block;
    797                 float: left;
    798                 width: 50%;
    799                 margin-bottom: 8px;
    800         }
    801         #plugin-info .head-big {
    802                 overflow: hidden;
    803                 width: 100%;
    804                 height: auto;
    805                 padding: 10px 0 0;
    806                 margin-bottom: 29px;
    807                 background: #eee;
    808                 -webkit-box-shadow: inset 0px -20px 32px 0px rgba( 100, 100, 100, 0.1 );
    809                 -moz-box-shadow: inset 0px -20px 32px 0px rgba( 100, 100, 100, 0.1 );
    810                 box-shadow: inset 0px -20px 32px 0px rgba( 100, 100, 100, 0.1 );
    811         }
    812 
    813         #plugin-description .shortdesc {
    814                 width: 100%;
    815         }
    816 
    817         body.trac #plugin-description p, #plugin-description p.button {
    818                 margin-top:0;
    819         }
    820 }
    821 
    822 @media screen and (min-width:810px) and (max-width:960px) {
    823         #plugin-title.with-banner {
    824                 height: 250px;
    825                 padding-bottom: 0;
    826         }
    827 }
    828 
    829 @media screen and (max-width:620px) {
    830         #plugin-title.with-banner {
    831                 margin-bottom: 2em;
    832         }
    833         #plugin-title.with-banner h2 {
    834                 -moz-box-sizing: border-box;
    835                 -webkit-box-sizing: border-box;
    836                 box-sizing: border-box;
    837                 min-height: 2em;
    838                 width: 100%;
    839                 font-size: 20px;
    840                 bottom: -2em;
    841                 left: 0;
    842                 margin: 0;
    843                 -webkit-border-radius: 0;
    844                 border-radius: 0;
    845         }
    846 }
    847 
    848 @media screen and (max-width:530px) {
    849         .video iframe {
    850                 width:100%;
    851         }
    852 }
    853 
    854 @media screen and (max-width:460px) {
    855     #headline .login {
    856         width: 91.35%;
    857     }
    858     #headline .login label {
    859         padding:0 0 10px;
    860     }
    861 }
    862 
    863 @media screen and (max-width:400px) {
    864     #headline .login label {
    865       display:block;
    866     }
    867 }
    868 
    869 /* New theme styles. */
    870 
    871 body.plugins-directory {
    872         background: #f1f1f1;
    873 }
    874 body.plugins-directory.topic-page, body.plugins-directory.page, body.plugins-directory.forum-page {
    875         background: #fff;
    876 }
    877 body.plugins-directory #pagebody {
    878         margin-top: 0;
    879 }
    880 
    881 .col-12 {
    882         width: 940px;
    883         margin: 0 10px;
    884 }
    885 #pagebody p.intro {
    886         font-family: inherit;
    887         text-align: center;
    888 }
    889 #sidebar h4 {
    890         margin-top: 20px;
    891 }
    892 #sidebar h4:first-child {
    893         margin-top: 0;
    894 }
    895 /* Hide visually but not from screen readers */
    896 .screen-reader-text,
    897 .screen-reader-text span {
    898         position: absolute;
    899         margin: -1px;
    900         padding: 0;
    901         height: 1px;
    902         width: 1px;
    903         overflow: hidden;
    904         clip: rect(0 0 0 0);
    905         border: 0;
    906 }
    907 
    908 /* Plugin card table view */
    909 .plugin-pagination {
    910         text-align: right;
    911 }
    912 .plugin-pagination .plugin-pagination-showing {
    913         float: left;
    914         font-weight: bold;
    915 }
    916 .plugin-group {
    917         overflow: hidden; /* clearfix */
    918         width: 100%;
    919         margin-top: 1.5em;
    920         display: table;
    921 }
    922 
    923 .plugin-group h3 {
    924         margin-top: 0;
    925 }
    926 #pagebody .plugin-card p {
    927         margin: 0 0 10px 0;
    928 }
    929 .plugin-card {
    930         float: left;
    931         margin: 0 8px 16px;
    932         width: 48.5%;
    933         width: -webkit-calc( 50% - 8px );
    934         width: calc( 50% - 8px );
    935         background-color: #fff;
    936         border: 1px solid #dedede;
    937         -webkit-box-sizing: border-box;
    938         -moz-box-sizing: border-box;
    939         box-sizing: border-box;
    940         display: table-row;
    941 }
    942 .plugin-card:nth-child(odd) {
    943         clear: both;
    944         margin-left: 0;
    945 }
    946 
    947 .plugin-card:nth-child(even) {
    948         margin-right: 0;
    949 }
    950 
    951 @media screen and ( max-width: 976px ) {
    952         .col-12.filter-bar {
    953                 width: 100%;
    954                 margin: 0;
    955         }
    956 
    957         .col-12.filter-bar .wp-filter {
    958                 border-left: 0;
    959                 border-right: 0;
    960                 padding-left: 0;
    961         }
    962 
    963         #pagebody p {
    964                 padding-left: 9px;
    965         }
    966 }
    967 @media screen and ( max-width: 940px ) {
    968         .col-12 {
    969                 width: 100%;
    970                 margin: 0;
    971         }
    972 }
    973 @media screen and ( max-width: 782px ) {
    974         .plugin-card {
    975                 margin-left: 0;
    976                 margin-right: 0;
    977                 width: 100%;
    978         }
    979 }
    980 
    981 .plugin-card-top {
    982         position: relative;
    983         padding: 20px 20px 10px;
    984         min-height: 135px;
    985 }
    986 
    987 .plugin-card h4 {
    988         font-weight: 600;
    989         border: 0;
    990         margin: 0 0 12px;
    991         font-size: 18px;
    992         line-height: 1.3;
    993 }
    994 .plugin-card a {
    995         border: 0;
    996 }
    997 .plugin-card .name,
    998 .plugin-card .desc {
    999         margin-left: 148px; /* icon + margin */
    1000         margin-right: 120px; /* action links */
    1001         margin-right: inherit;
    1002         word-break: break-word;
    1003 }
    1004 
    1005 .plugin-card-bottom {
    1006         clear: both;
    1007         padding: 12px 20px;
    1008         background-color: #fafafa;
    1009         border-top: 1px solid #dedede;
    1010         overflow: hidden;
    1011 }
    1012 
    1013 .plugin-card-bottom .wporg-ratings {
    1014         display: inline;
    1015 }
    1016 
    1017 .plugin-card .column-rating {
    1018         line-height: 23px;
    1019 }
    1020 
    1021 .plugin-card .column-rating,
    1022 .plugin-card .column-updated {
    1023         margin-bottom: 4px;
    1024 }
    1025 
    1026 .plugin-card .column-rating,
    1027 .plugin-card .column-installs {
    1028         float: left;
    1029         clear: left;
    1030         max-width: 160px;
    1031 }
    1032 
    1033 .plugin-card .column-updated,
    1034 .plugin-card .column-compatibility {
    1035         text-align: right;
    1036         float: right;
    1037         clear: right;
    1038         width: 65%;
    1039         width: -webkit-calc( 100% - 160px );
    1040         width: calc( 100% - 160px );
    1041 }
    1042 .plugin-card .column-compatibility span:before {
    1043         font: normal 20px/.5 'dashicons';
    1044         speak: none;
    1045         display: inline-block;
    1046         padding: 0;
    1047         top: 4px;
    1048         left: -2px;
    1049         position: relative;
    1050         vertical-align: top;
    1051         -webkit-font-smoothing: antialiased;
    1052         -moz-osx-font-smoothing: grayscale;
    1053         text-decoration: none !important;
    1054         color: #444;
    1055 }
    1056 
    1057 .plugin-card .compatibility-incompatible:before {
    1058         content: '\f158';
    1059 }
    1060 
    1061 .plugin-card .compatibility-compatible:before {
    1062         content: '\f147';
    1063 }
    1064 
    1065 .plugin-card .compatibility-untested strong {
    1066         font-weight: normal;
    1067 }
    1068 .plugin-icon {
    1069         position: absolute;
    1070         top: 20px;
    1071         left: 20px;
    1072         width: 128px;
    1073         height: 128px;
    1074         margin: 0 20px 20px 0;
    1075         top: 10px;
    1076         left: 10px;
    1077 }
    1078 .plugin-icon .plugin-icon {
    1079         float:left;
    1080         margin: 3px 6px 6px 0px;
    1081 }
    1082 
    1083 .plugin-icon img {
    1084         width: 128px;
    1085         height: 128px;
    1086 }
    1087 
    1088 .no-plugin-results {
    1089         color: #999;
    1090         font-size: 18px;
    1091         font-style: normal;
    1092         margin: 0;
    1093         padding: 30px 0 20px;
    1094         text-align: center;
    1095 }
    1096 @media screen and ( max-width: 1100px ) and ( min-width: 782px ), ( max-width: 480px ) {
    1097         .plugin-card .name,
    1098         .plugin-card .desc {
    1099                 margin-right: 0;
    1100         }
    1101 
    1102         .plugin-card .desc p:first-of-type {
    1103                 margin-top: 0;
    1104         }
    1105 }
    1106 
    1107 
    1108 /* Filter bar */
    1109 .wp-filter {
    1110         display: inline-block;
    1111         position: relative;
    1112         -webkit-box-sizing: border-box;
    1113         -moz-box-sizing: border-box;
    1114         box-sizing: border-box;
    1115         margin: 12px 0 25px;
    1116         padding: 0 20px;
    1117         width: 100%;
    1118         -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
    1119         box-shadow: 0 1px 1px rgba(0,0,0,0.04);
    1120         border: 1px solid #e5e5e5;
    1121         background: #fff;
    1122         color: #555;
    1123         font-size: 13px;
    1124 }
    1125 
    1126 .wp-filter a {
    1127         text-decoration: none;
    1128 }
    1129 
    1130 .wp-filter .plugin-install-beta {
    1131         padding-right: 15px;
    1132         border-right: 1px solid #e5e5e5;
    1133         margin-right: 15px;
    1134 }
    1135 body.search-page .wp-filter .plugin-install-beta,
    1136 body.tag-page .wp-filter .plugin-install-beta {
    1137         padding-right: 10px;
    1138         margin-right: 10px;
    1139 }
    1140 
    1141 .filter-count {
    1142         display: inline-block;
    1143         vertical-align: middle;
    1144         min-width: 4em;
    1145 }
    1146 
    1147 .title-count,
    1148 .filter-count .count {
    1149         display: inline-block;
    1150         position: relative;
    1151         top: -1px;
    1152         padding: 4px 10px;
    1153         -webkit-border-radius: 30px;
    1154         border-radius: 30px;
    1155         background: #777;
    1156         color: #fff;
    1157         font-size: 14px;
    1158         font-weight: 600;
    1159 }
    1160 
    1161 /* not a part of filter bar, but derived from it, so here for now */
    1162 .title-count {
    1163         display: inline;
    1164         top: -3px;
    1165         margin-left: 5px;
    1166         margin-right: 20px;
    1167 }
    1168 
    1169 #pagebody ul.filter-links {
    1170         display: inline-block;
    1171         margin: 0;
    1172 }
    1173 
    1174 .filter-links li {
    1175         display: inline-block;
    1176         margin: 0;
    1177 }
    1178 
    1179 .filter-links li > a {
    1180         display: inline-block;
    1181         margin: 0 10px;
    1182         padding: 15px 0;
    1183         border-bottom: 4px solid #fff;
    1184         color: #666;
    1185         cursor: pointer;
    1186 }
    1187 
    1188 .filter-links .current {
    1189         -webkit-box-shadow: none;
    1190         box-shadow: none;
    1191         border-bottom: 4px solid #666;
    1192         color: #222;
    1193 }
    1194 
    1195 .filter-links li > a:hover,
    1196 .filter-links li > a:focus,
    1197 .show-filters .filter-links a.current:hover,
    1198 .show-filters .filter-links a.current:focus {
    1199         color: #2ea2cc;
    1200 }
    1201 
    1202 .wp-filter .search-form {
    1203         float: right;
    1204         margin: 12px 0 11px;
    1205 }
    1206 
    1207 .wp-filter .search-form input[type="search"] {
    1208         margin: 0;
    1209         padding: 3px 5px;
    1210         width: 280px;
    1211         font-size: 16px;
    1212         font-weight: 300;
    1213         line-height: 1.5;
    1214 }
    1215 body.search-page .wp-filter .search-form input[type="search"],
    1216 body.tag-page .wp-filter .search-form input[type="search"] {
    1217         width: 240px;
    1218 }
    1219 
    1220 .wp-filter .search-form select {
    1221         height: 33px;
    1222         vertical-align: top;
    1223 
    1224         padding: 2px;
    1225         line-height: 28px;
    1226         font-size: 14px;
    1227         border-radius: 0;
    1228         border: 1px solid #ddd;
    1229         background-color: #fff;
    1230         color: #333;
    1231         outline: 0;
    1232         -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
    1233         box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
    1234         transition: .05s border-color ease-in-out;
    1235 }
    1236 
    1237 .wp-filter .drawer-toggle {
    1238         display: inline-block;
    1239         margin: 0 10px;
    1240         padding: 4px 6px;
    1241         color: #666;
    1242         cursor: pointer;
    1243 }
    1244 
    1245 .wp-filter .drawer-toggle:before {
    1246         display: inline-block;
    1247         vertical-align: top;
    1248         content: "\f111";
    1249         margin: 0 5px 0 0;
    1250         width: 16px;
    1251         height: 16px;
    1252         color: #777;
    1253         -webkit-transition: color .1s ease-in 0;
    1254         transition: color .1s ease-in 0;
    1255         font-family: "dashicons";
    1256         font-size: 16px;
    1257         line-height: 1;
    1258         text-align: center;
    1259         text-decoration: inherit;
    1260         font-weight: normal;
    1261         font-style: normal;
    1262         -webkit-font-smoothing: antialiased;
    1263 }
    1264 
    1265 .wp-filter .drawer-toggle:hover,
    1266 .wp-filter .drawer-toggle:hover:before {
    1267         color: #2ea2cc;
    1268 }
    1269 
    1270 .wp-filter .drawer-toggle.current:before {
    1271         color: #fff;
    1272 }
    1273 
    1274 .filter-drawer {
    1275         display: none;
    1276         margin: 0 -20px;
    1277         padding: 20px;
    1278         border-top: 1px solid #eee;
    1279         background: #fafafa;
    1280 }
    1281 
    1282 .show-filters .filter-drawer {
    1283         display: block;
    1284         overflow: hidden;
    1285 }
    1286 
    1287 .show-filters .wp-filter .drawer-toggle:hover,
    1288 .show-filters .wp-filter .drawer-toggle:focus {
    1289         background: rgb(46, 162, 204);
    1290 }
    1291 
    1292 .show-filters .filter-links a.current {
    1293         border-bottom: none;
    1294 }
    1295 
    1296 .show-filters .wp-filter .drawer-toggle {
    1297         -webkit-border-radius: 2px;
    1298         border-radius: 2px;
    1299         border: none;
    1300         background: #777;
    1301         color: #fff;
    1302 }
    1303 
    1304 .show-filters .wp-filter .drawer-toggle:before {
    1305         color: #fff;
    1306 }
    1307 
    1308 .filter-group {
    1309         -webkit-box-sizing: border-box;
    1310         -moz-box-sizing: border-box;
    1311         box-sizing: border-box;
    1312         float: left;
    1313         margin: 0 1% 0 0;
    1314         padding: 10px;
    1315         width: 19%;
    1316         background: #fff;
    1317         border: 1px solid #e5e5e5;
    1318         -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
    1319         box-shadow: 0 1px 1px rgba(0,0,0,0.04);
    1320 }
    1321 
    1322 .filter-group.wide {
    1323         width: 38%;
    1324 }
    1325 
    1326 .filter-group h4 {
    1327         position: relative;
    1328         margin: 0;
    1329 }
    1330 
    1331 .filter-drawer ol {
    1332         margin: 20px 0 0;
    1333         list-style-type: none;
    1334         font-size: 12px;
    1335 }
    1336 
    1337 .filter-drawer li {
    1338         display: inline-block;
    1339         vertical-align: top;
    1340         margin: 5px 0;
    1341         padding-right: 25px;
    1342         width: 160px;
    1343         list-style-type: none;
    1344 }
    1345 
    1346 .filter-drawer .buttons {
    1347         margin-bottom: 20px;
    1348 }
    1349 
    1350 .filter-drawer .buttons .button span {
    1351         display: inline-block;
    1352         opacity: 0.8;
    1353         font-size: 12px;
    1354         text-indent: 10px;
    1355 }
    1356 
    1357 .wp-filter .button.clear-filters {
    1358         display: none;
    1359         margin: 0 0 20px 10px;
    1360 }
    1361 
    1362 .filtered-by {
    1363         display: none;
    1364         margin: 0;
    1365 }
    1366 
    1367 .filtered-by > span {
    1368         font-weight: 600;
    1369 }
    1370 
    1371 .filtered-by a {
    1372         margin-left: 10px;
    1373 }
    1374 
    1375 .filtered-by .tags {
    1376         display: inline;
    1377 }
    1378 
    1379 .filtered-by .tag {
    1380         margin: 0 5px;
    1381         padding: 4px 8px;
    1382         border: 1px solid #e5e5e5;
    1383         -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
    1384         box-shadow: 0 1px 1px rgba(0,0,0,0.04);
    1385         background: #fff;
    1386         font-size: 11px;
    1387 }
    1388 
    1389 .filters-applied .filter-group,
    1390 .filters-applied .filter-drawer .buttons,
    1391 .filters-applied .filter-drawer br {
    1392         display: none !important;
    1393 }
    1394 
    1395 .filters-applied .filtered-by {
    1396         display: block;
    1397 }
    1398 
    1399 .filters-applied .filter-drawer {
    1400         padding: 20px;
    1401 }
    1402 
    1403 .show-filters .content-filterable,
    1404 .show-filters.filters-applied.loading-content .content-filterable,
    1405 .loading-content .content-filterable,
    1406 .error .content-filterable {
    1407         display: none;
    1408 }
    1409 
    1410 .show-filters.filters-applied .content-filterable {
    1411         display: block;
    1412 }
    1413 
    1414 
    1415 /* ------- */
    1416 .wp-filter .actions {
    1417         display: inline-block;
    1418         vertical-align: middle;
    1419 }
    1420 .wp-filter .view-switch {
    1421         display: inline-block;
    1422         vertical-align: middle;
    1423         padding: 14px 0;
    1424         margin: 0 20px 0 0;
    1425 }
    1426 
    1427 input[type=search] {
    1428         border: 1px solid #ddd;
    1429         -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
    1430         box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
    1431         background-color: #fff;
    1432         color: #333;
    1433         outline: 0;
    1434         -webkit-transition: .05s border-color ease-in-out;
    1435         transition: .05s border-color ease-in-out;
    1436         -webkit-appearance: textfield;
    1437 }
    1438 
    1439 .nav.top {
    1440         text-align: right;
    1441 }
    1442 .nav.bottom {
    1443         margin: 10px 0 22px;
    1444         text-align: right;
    1445 }
    1446 
    1447 .dots, .next, .prev {
    1448         background-color: inherit;
    1449 }
    1450 
    1451 .widget {
    1452         margin-bottom: 1em;
    1453 
    1454 }
    1455 
    1456 /* Ratings */
    1457 .widget.plugin-ratings {
    1458         margin: 0 0 1.5em;
    1459         min-height: 26px;
    1460 }
    1461 
    1462 .rtl .dashicons-star-half:before {
    1463         -webkit-transform: rotateY(180deg);
    1464         -ms-transform: rotateY(180deg);
    1465         transform: rotateY(180deg);
    1466 }
    1467 
    1468 .widget.plugin-ratings a.dashicons {
    1469         color: inherit;
    1470 }
    1471 
    1472 .widget.plugin-ratings .description {
    1473         color: #aa9;
    1474         display: inline-block;
    1475         font-style: italic;
    1476         margin: 0 5px;
    1477         vertical-align: text-bottom;
    1478 }
    1479 .widget.plugin-ratings ul.ratings-list {
    1480         list-style-type: none;
    1481         padding: 0;
    1482         margin: 0 !important;
    1483 }
    1484 .widget.plugin-ratings .counter-container,
    1485 .widget.plugin-ratings .counter-container a {
    1486         display: inline-block;
    1487         width: 100%;
    1488 }
    1489 .widget.plugin-ratings .counter-label,
    1490 .widget.plugin-ratings .counter-count {
    1491         line-height: 1.75;
    1492 }
    1493 .widget.plugin-ratings .counter-label {
    1494         float: left;
    1495         margin-right: 5px;
    1496         min-width: 55px;
    1497 }
    1498 .widget.plugin-ratings .counter-back,
    1499 .widget.plugin-ratings .counter-bar {
    1500         float: left;
    1501         height: 17px;
    1502 }
    1503 .widget.plugin-ratings .counter-back {
    1504         background-color: #ececec;
    1505         width: 64%;
    1506         width: -webkit-calc(100% - 88px);
    1507         width: calc(100% - 88px);
    1508 }
    1509 .widget.plugin-ratings .counter-bar {
    1510         background-color: #ffc733;
    1511 }
    1512 .widget.plugin-ratings .counter-count {
    1513         float: left;
    1514         margin-left: 5px;
    1515 }
    1516 
    1517 .page-numbers {
    1518         font-size: 11px;
    1519         line-height: 1;
    1520         padding: 4px 6px;
    1521         margin-right: 3px;
    1522         border-width: 1px;
    1523         border-style: solid;
    1524         background-color: #fff;
    1525         border-color: #ccc;
    1526         display: inline-block;
    1527         text-align: center;
    1528 }
    1529 
    1530 .dots {
    1531         background: none;
    1532         border: none;
    1533 }
    1534 
    1535 .page-numbers.current {
    1536         font-weight: bold;
    1537         border-width: 1px;
    1538         border-style: solid;
    1539         background-color: #328ab2;
    1540         border-color: #328ab2;
    1541         color: #fff;
    1542 }
    1543 
    1544 a.page-numbers:hover {
    1545         border-color: #999;
    1546 }
    1547 
    1548 .next,
    1549 .prev {
    1550         padding: 0;
    1551         border: none;
    1552         background-color: #fff;
    1553         color: #2583ad;
    1554 }
    1555 
    1556 .next:hover,
    1557 .prev:hover {
    1558         color: #d54e21;
    1559 }
     25Any style changes should be done in /scss and compiled via `grunt sass`.
     26Thanks!
Note: See TracChangeset for help on using the changeset viewer.