WordPress.org
Get WordPress

Making WordPress.org

Changeset 3193


Ignore:
Timestamp:
05/20/2016 05:16:55 PM (8 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.