WordPress.org
Get WordPress

Making WordPress.org

Changeset 2492


Ignore:
Timestamp:
02/10/2016 08:05:09 PM (9 years ago)
Author:
mapk
Message:

wporg login: Redesigned login pages based on feedback. Reverted to lighter background.
#1524

Location:
sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-login
Files:
2 added
10 edited

Legend:

Unmodified
Added
Removed

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

    r2313 r2492  
    77?>
    88    </div>
    9     <div class="loginfooter">wordpress.org &nbsp; • &nbsp; code is poetry</div>
    10 </div>
    119
    1210<?php wp_footer(); ?>

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

    r2454 r2492  
    11<?php
    22/**
    3  * W.org login functions and definitions.
     3 * WP.org login functions and definitions.
    44 *
    55 * @package wporg-login
    … …  
    4646 */
    4747function wporg_login_replace_css() {
    48     $css_file = '/stylesheets/login.css';
    49     wp_deregister_style( 'login' );
    50     wp_register_style( 'login', get_stylesheet_directory_uri() . $css_file, array( 'buttons', 'dashicons', 'open-sans' ), filemtime( __DIR__ . $css_file ) );
     48    wp_enqueue_style( 'wporg-login', get_template_directory_uri() . '/stylesheets/login.css', array( 'login', 'dashicons', 'l10n' ), 1 );
    5149}
    5250add_action( 'login_init', 'wporg_login_replace_css' );
    5351
    54 /**
    55  * Log failed logins to Google Analytics.
    56  */
    57 $wporg_login_failed_username = '';
    58 function wporg_login_failed( $errors ) {
    59     global $wporg_login_failed_username;
    60     $wporg_login_failed_username = ( 'incorrect_password' == $errors->get_error_code() || 'empty_password' == $errors->get_error_code() ) ? esc_attr(wp_unslash($_POST['log'])) : '';
    61 
    62     return $errors;
    63 }
    64 add_action( 'wp_login_errors', 'wporg_login_failed', 10, 1 );
    6552
    6653/**
    67  * Add Google Analytics tracking to login pages.
     54 * Enqueue scripts and styles.
    6855 */
    69 function wporg_login_analytics() {
    70     global $wporg_login_failed_username;
    71     ?>
    72 <script type="text/javascript">
    73 var _gaq = _gaq || [];
    74 _gaq.push(['_setAccount', 'UA-52447-1']);
    75 _gaq.push(['_setDomainName', 'wordpress.org']);
    76 _gaq.push(['_trackPageview']);
    77 <?php if ( $wporg_login_failed_username ) { ?>
    78     _gaq.push(['_trackEvent', 'user', 'login-failed', '<?php echo $wporg_login_failed_username; ?>']);
    79 <?php } ?>
    80 (function() {
    81     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    82     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    83     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    84 })();
    85 function recordOutboundLink(link, category, action) {
    86     _gaq.push(['_trackEvent', category, action])
    87     setTimeout('document.location = "' + link.href + '"', 100);
     56function wporg_login_scripts() {
     57    $script_debug = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG;
     58    $suffix       = $script_debug ? '' : '.min';
     59 
     60    // Concatenates core scripts when possible.
     61    if ( ! $script_debug ) {
     62        $GLOBALS['concatenate_scripts'] = true;
     63    }
     64 
     65    wp_enqueue_style( 'wporg-normalize', get_template_directory_uri() . '/stylesheets/normalize.css', 3 );
     66    wp_enqueue_style( 'wporg-login', get_template_directory_uri() . '/stylesheets/login.css', array( 'login', 'dashicons', 'l10n' ), 1 );
     67 
     68    // No emoji support needed.
     69    remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
     70    remove_action( 'wp_print_styles', 'print_emoji_styles' );
     71 
     72    // No Jetpack styles needed.
     73    add_filter( 'jetpack_implode_frontend_css', '__return_false' );
     74 
     75    // No embeds needed.
     76    remove_action( 'wp_head','wp_oembed_add_discovery_links' );
     77    remove_action( 'wp_head', 'wp_oembed_add_host_js' );
    8878}
    89 </script>
    90     <?php
    91 }
    92 add_action( 'wp_footer',    'wporg_login_analytics' );
    93 add_action( 'login_footer', 'wporg_login_analytics' );
     79add_action( 'wp_enqueue_scripts', 'wporg_login_scripts' );

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

    r2351 r2492  
    55 * @package wporg-login
    66 */
    7 
    8 $normalize_css = '/stylesheets/normalize.css';
    9 wp_enqueue_style( 'normalize', get_template_directory_uri() . $normalize_css, array(), filemtime( __DIR__ . $normalize_css ) );
    10 
    11 $login_css = '/stylesheets/login.css';
    12 wp_enqueue_style( 'custom-login', get_template_directory_uri() . $login_css, array(), filemtime( __DIR__ . $login_css ) );
    137?>
    148<!doctype html>
    … …  
    1711<meta charset="utf-8">
    1812<meta http-equiv="x-ua-compatible" content="ie=edge">
    19 <title><?php _e( 'WordPress.org Login', 'wporg-login' ); ?></title>
    20 <meta name="description" content="">
     13<title><?php _e( 'WordPress.org Login' ); ?></title>
    2114<meta name="viewport" content="width=device-width, initial-scale=1">
    2215
    2316<?php wp_head(); ?>
    2417</head>
    25 <body>
     18<body class="wp-core-ui login">
    2619
    27 <div class="wrapper">
    28     <div class="login">
    29         <h1><a href="https://wordpress.org/" title="WordPress.org" tabindex="-1"><?php _e( 'WordPress.org Login', 'wporg-login' ); ?></a></h1>
     20<div id="login">
     21    <h1><a href="https://wordpress.org/" title="WordPress.org" tabindex="-1"><?php _e( 'WordPress.org Login' ); ?></a></h1>

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-login/partials/404.php

    r2323 r2492  
    11<p class="center"><?php _e( '404, not found.', 'wporg-login' ); ?></p>
    22
    3 <p class="nav">
     3<p id="nav">
    44    <a href="/"><?php _e( '&larr; Back to login', 'wporg-login' ); ?></a>
    55</p>

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-login/partials/checkemail.php

    r2321 r2492  
    1 <p class="center"><?php _e( 'Check your email for the confirmation link.', 'wporg-login' ); ?></p>
     1<p class="center singleline"><?php _e( 'Check your email for a confirmation link.', 'wporg-login' ); ?></p>
    22
    3 <p class="nav">
     3<p id="nav">
    44    <a href="/"><?php _e( '&larr; Back to login', 'wporg-login' ); ?></a>
    55</p>

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-login/partials/loggedout.php

    r2321 r2492  
    11<p class="center"><?php _e( 'You are now logged out.', 'wporg-login' ); ?></p>
    22
    3 <p class="nav">
     3<p id="nav">
    44    <a href="/"><?php _e( '&larr; Back to login', 'wporg-login' ); ?></a>
    55</p>

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

    r2466 r2492  
     1<p class="intro">Log in to your WordPress.org account to contribute to WordPress, get help in the support forum, or rate and review themes and plugins.</p>
     2
    13<?php wp_login_form(); ?>
    24
    3 <p class="nav">
    4     <a href="<?php echo wp_lostpassword_url( '/' ); ?>" title="<?php _e( 'Password Lost and Found', 'wporg-login' ); ?>"><?php _e( 'Forgot password?', 'wporg-login' ); ?></a> &nbsp; • &nbsp;
     5<p id="nav">
     6    <a href="/lostpassword/" title="<?php _e( 'Password Lost and Found', 'wporg-login' ); ?>"><?php _e( 'Lost password?', 'wporg-login' ); ?></a> &nbsp; • &nbsp;
    57    <a href="https://wordpress.org/support/register.php" title="<?php _e( 'Create an account', 'wporg-login' ); ?>"><?php _e( 'Create an account', 'wporg-login' ); ?></a>
    68</p>

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-login/partials/lostpassword.php

    r2323 r2492  
    1 <p><?php _e( 'Please enter your username or email address. You will receive a link to create a new password via email.', 'wporg-login' ); ?></p>
     1
    22
    33<form name="lostpasswordform" id="lostpasswordform" action="/wp-login.php?action=lostpassword" method="post">
     4    <p class="intro"><?php _e( 'Please enter your username or email address. You will receive a link to create a new password via email.', 'wporg-login' ); ?></p>
    45    <p>
    56        <label for="user_login"><?php _e( 'Username or Email', 'wporg-login' ); ?>
    … …  
    1112    </p>
    1213</form>
    13 <p class="nav">
     14<p id="nav">
    1415    <a href="/"><?php _e( '&larr; Back to login', 'wporg-login' ); ?></a>
    1516</p>

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-login/partials/oauth.php

    r2308 r2492  
    11<p><?php _e( 'Coming soon. :)', 'wporg-login' ); ?></p>
    22
    3 <p class="nav">
     3<p id="nav">
    44    <a href="/"><?php _e( '&larr; Back to login', 'wporg-login' ); ?></a>
    55</p>

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

    r2353 r2492  
    1 @import url(../stylesheets/l10n.css);
    2 @import url(../stylesheets/dashicons.css);
    3 
    4 /**
    5  * * #.# Compass Reset
    6  *
    7  * A quick way to reset some of the HTML elements across browsers
    8  */
    9 
    10 html, body, div, span, applet, object, iframe,
    11 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    12 a, abbr, acronym, address, big, cite, code,
    13 del, dfn, em, img, ins, kbd, q, s, samp,
    14 small, strike, strong, sub, sup, tt, var,
    15 b, u, i, center,
    16 dl, dt, dd, ol, ul, li,
    17 fieldset, form, label, legend,
    18 table, caption, tbody, tfoot, thead, tr, th, td,
    19 article, aside, canvas, details, embed,
    20 figure, figcaption, footer, header, hgroup,
    21 menu, nav, output, ruby, section, summary,
    22 time, mark, audio, video {
    23     margin: 0;
    24     padding: 0;
    25     border: 0;
    26     font: inherit;
    27     font-size: 100%;
    28     vertical-align: baseline;
    29 }
    30 
    31 html {
    32     line-height: 1;
    33 }
    34 
    35 ol, ul {
    36     list-style: none;
    37 }
    38 
    39 table {
    40     border-collapse: collapse;
    41     border-spacing: 0;
    42 }
    43 
    44 caption, th, td {
    45     text-align: left;
    46     font-weight: normal;
    47     vertical-align: middle;
    48 }
    49 
    50 q, blockquote {
    51     quotes: none;
    52 }
    53 
    54 q:before, q:after, blockquote:before, blockquote:after {
    55     content: "";
    56     content: none;
    57 }
    58 
    59 a img {
    60     border: none;
    61 }
    62 
    63 article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    64     display: block;
    65 }
    66 
    671/**
    682 * #.# wp-login CSS overwrites
    … …  
    715 */
    726
    73 button, input, optgroup, select, textarea {
    74     color: inherit;
    75     font: inherit;
    76     margin: 0;
    77 }
    78 
    797body.login {
    80     padding-top: 8%;
     8    /* Using flexbox to control the vertical alignment of the form and white box */
     9    display: -webkit-flex;
     10    display: flex;
     11    -webkit-align-items:center;
     12    align-items:center;
    8113}
    8214
    … …  
    8719    border-left: none;
    8820    background-color: transparent;
    89     color: #f5f5f5 !important;
     21    color: #555D66;
    9022    padding: 0;
    9123    -webkit-box-shadow: none;
    … …  
    9325}
    9426
    95 .wp-core-ui.login .button-primary {
    96     width: 100%;
    97     height: 40px;
    98     background: #00a0d2;
    99     color: #fff;
    100     border: none;
    101     -webkit-border-radius: 2px;
    102     -moz-border-radius: 2px;
    103     border-radius: 2px;
    104     outline: none;
    105     position: relative;
    106     text-shadow: none;
    107     font-size: 16px;
    108     -webkit-box-shadow: none;
    109     box-shadow: none;
    110 }
    111 
    112 .wp-core-ui.login .button-primary:hover {
    113     background: #008db9;
    114     -webkit-transition: background 0.2s ease;
    115     transition: background 0.2s ease;
    116 }
    117 
    118 .wp-core-ui.login .button-primary:active {
    119     -webkit-box-shadow: none;
    120     box-shadow: none;
    121     top: 0;
     27.wp-core-ui .button-primary, .wp-core-ui.login .button-primary {
     28    width:100%;
     29    height:40px;
     30    font-size:14px;
    12231}
    12332
    … …  
    12635}
    12736
    128 .login #nav,
    129 .container #nav {
    130     font-size: 0.8em;
    131     padding: 0;
    132     margin: 24px 0;
    133     text-align: center;
    134 }
    135 
    13637#pass-strength-result {
    137     background: #23282d;
     38    background: #FFF;
    13839}
    13940
    14041#pass-strength-result.strong {
     42    background-color:#FFF;
     43    border-color:transparent;
    14144    color: #46b450;  /* Green */
    14245    -webkit-box-shadow:
    143         inset 0 16px #23282d,
    144         inset 0 -16px #23282d,
     46        inset 0 14px #FFF,
     47        inset 0 -14px #FFF,
    14548        inset -100px 0 #46b450,
    14649        inset 100px 0 #46b450;
    14750    box-shadow:
    148         inset 0 16px #23282d,
    149         inset 0 -16px #23282d,
     51        inset 0 14px #FFF,
     52        inset 0 -14px #FFF,
    15053        inset -100px 0 #46b450,
    15154        inset 100px 0 #46b450;
    … …  
    15356
    15457#pass-strength-result.good {
     58    background-color:#FFF;
     59    border-color:transparent;
    15560    color: #ffb900; /* Orange */
    15661    -webkit-box-shadow:
    157         inset 0 16px #23282d,
    158         inset 0 -16px #23282d,
    159         inset -100px 0 #ffb900,
    160         inset 100px 0 #ffb900;
     62        inset 0 14px #FFF,
     63        inset 0 -14px #FFF,
     64        inset -80px 0 #ffb900,
     65        inset 80px 0 #ffb900;
    16166    box-shadow:
    162         inset 0 16px #23282d,
    163         inset 0 -16px #23282d,
    164         inset -100px 0 #ffb900,
    165         inset 100px 0 #ffb900;
     67        inset 0 14px #FFF,
     68        inset 0 -14px #FFF,
     69        inset -80px 0 #ffb900,
     70        inset 80px 0 #ffb900;
    16671}
    16772
    16873#pass-strength-result.bad, #pass-strength-result.short {
     74    background-color:#FFF;
     75    border-color:transparent;
    16976    color: #dc3232; /* Red */
    17077    -webkit-box-shadow:
    171         inset 0 16px #23282d,
    172         inset 0 -16px #23282d,
    173         inset -100px 0 #dc3232,
    174         inset 100px 0 #dc3232;
     78        inset 0 14px #FFF,
     79        inset 0 -14px #FFF,
     80        inset -80px 0 #dc3232,
     81        inset 80px 0 #dc3232;
    17582    box-shadow:
    176         inset 0 16px #23282d,
    177         inset 0 -16px #23282d,
    178         inset -100px 0 #dc3232,
    179         inset 100px 0 #dc3232;
    180 }
     83        inset 0 14px #FFF,
     84        inset 0 -14px #FFF,
     85        inset -80px 0 #dc3232,
     86        inset 80px 0 #dc3232;
     87}
     88
     89.reset-pass {
     90    margin-bottom:0;
     91}
     92
     93#loginform {
     94    margin: 0 !important;
     95    padding: 0 !important;
     96    background: transparent !important;
     97    -webkit-box-shadow: none !important;
     98    box-shadow: none !important;
     99}
     100
     101#login form p {
     102    margin:0;
     103}
     104
     105
    181106
    182107/**
    … …  
    185110 * The rest of the CSS is for all login pages.
    186111 */
    187 html, body {
    188     height: 100%;
    189 }
    190 
    191 html {
    192     background: #23282d;
    193     margin: 0;
    194     padding: 0;
    195 }
    196112
    197113body {
    198     color: #f5f5f5;
    199     font-family: "Open Sans", sans-serif;
    200     font-size: 16px;
    201     font-weight: 300;
    202     line-height: 1.4;
     114    color: #555D66;
     115    font-size: 14px;
    203116}
    204117
    … …  
    210123
    211124a {
    212     color: #009fd4;
    213     text-decoration: none;
     125    color: #555D66 !important;
     126    text-decoration: underline !important;
    214127    font-weight: normal;
    215     -webkit-transition-property: border, background, color;
    216     transition-property: border, background, color;
    217     -webkit-transition-duration: 0.05s;
    218     transition-duration: 0.05s;
    219     -webkit-transition-timing-function: ease-in-out;
    220     transition-timing-function: ease-in-out;
    221128    outline: 0;
    222129}
    … …  
    239146}
    240147
    241 .subtle {
    242     color: #b4b9be;
    243     font-size: 0.8em;
    244     font-weight: normal;
    245 }
    246 
    247148.small {
    248149    font-size: 0.8em;
    … …  
    254155}
    255156
    256 .btn {
    257     width: 100%;
    258     height: 40px;
    259     background: #b4b9be;
    260     border: none;
    261     color: #32373c;
    262     -webkit-border-radius: 2px;
    263     border-radius: 2px;
    264     outline: none;
    265     position: relative;
    266 }
    267 
    268 .btn:hover {
    269     background: #99a0a6;
    270     -webkit-transition: background 0.2s ease;
    271     transition: background 0.2s ease;
    272 }
    273 
    274 .btn:focus {
    275     -webkit-box-shadow: 0 0 0 2px #00A0D2;
    276     box-shadow: 0 0 0 2px #00A0D2;
    277 }
    278 
    279 .btn:active {
    280     top: 1px;
    281 }
    282 
    283 .btn.btn-primary {
    284     background: #00a0d2;
    285     color: #fff;
    286 }
    287 
    288 .btn.btn-primary:hover {
    289     background: #008db9;
    290 }
    291 
    292 .button-primary {
    293     width: 100%;
    294     height: 40px;
    295     background: #00a0d2;
    296     color: #fff;
    297     border: none;
    298     -webkit-border-radius: 2px;
    299     border-radius: 2px;
    300     outline: none;
    301     position: relative;
    302 }
    303 
    304 .button-primary:hover, .button-primary:focus {
    305     background: #008db9;
    306     -webkit-transition: background 0.2s ease;
    307     transition: background 0.2s ease;
    308 }
    309 
    310 .button-primary:focus {
    311     -webkit-box-shadow: 0 0 0 2px #00A0D2;
    312     box-shadow: 0 0 0 2px #00A0D2;
    313 }
    314 
    315 .button-primary:active {
    316     top: 1px;
     157.wp-core-ui .button-primary {
     158    -webkit-box-shadow:none;
     159    box-shadow:none;
    317160}
    318161
    … …  
    327170}
    328171
    329 .login, .container {
     172.singleline {
     173    position:relative;
     174    left:-12px;
     175    width:278px;
     176}
     177
     178#login {
    330179    width: 304px;
    331     padding: 0;
    332     margin: auto;
    333 }
    334 
    335 .login h1, .container h1 {
     180    padding: 24px;
     181    margin: 0 auto 0;
     182    background: #FFF;
     183    position: relative;
     184    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
     185    box-shadow: 0 1px 2px rgba(0,0,0,.2);
     186}
     187
     188#login h1 {
    336189    text-align: center;
    337     margin-bottom: 56px;
    338 }
    339 
    340 .login h1 a, .container h1 a {
    341     background-image: url(../images/wporg-logotype-standard.png);
    342     background-image: none, url(../images/wporg-logotype-standard.svg);
    343     -webkit-background-size: 253px;
    344     background-size: 253px;
     190    margin-bottom: 24px;
     191    position: absolute;
     192    top: -72px;
     193    width: 100%;
     194    left: 0;
     195}
     196
     197#login h1 a {
     198    background-image: url(../images/wporg-logo.png);
     199    background-image: none, url(../images/wporg-logo.svg);
     200    -webkit-background-size: 256px;
     201    background-size: 256px;
    345202    background-position: center top;
    346203    background-repeat: no-repeat;
    … …  
    354211    overflow: hidden;
    355212    display: block;
    356 }
    357 
    358 .login .message,
    359 .login #login_error,
    360 .container .message,
    361 .container #login_error {
     213    -webkit-transition:none;
     214    transition:none;
     215}
     216
     217p.intro, #login .message {
     218    margin-bottom:24px !important;
     219}
     220
     221#login .message + #login_error {
     222    margin-top:0 !important;
     223    border-top:1px solid #f5f5f5;
     224}
     225
     226#login #login_error {
    362227    border-left: 4px solid #00a0d2;
    363228    padding: 12px;
    364     margin-left: 0;
    365     background-color: #fff;
    366     -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
    367     box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
    368     color: #000 !important;
    369 }
    370 
    371 .login #login_error, .container #login_error {
     229    margin:-24px 0 24px -24px;
     230    background-color: #fbfbfb;
     231    width:304px;
     232    border-bottom:1px solid #f5f5f5;
     233    -webkit-box-shadow:none !important;
     234    box-shadow:none !important;
     235}
     236
     237#login #login_error {
    372238    border-left-color: #dc3232;
    373239}
    374240
    375 .login .nav, .container .nav {
    376     font-size: 0.8em;
    377     padding: 0;
    378     margin: 24px 0;
    379     text-align: center;
     241#login #nav {
     242    font-size: 13px;
     243    padding: 0;
     244    margin: 24px auto;
     245    text-align: center;
     246    position: absolute;
     247    left: 0;
     248    bottom: -68px;
     249    width: 100%;
     250}
     251
     252.login form {
     253    margin: 0 !important;
     254    padding: 0 !important;
     255    background: transparent !important;
     256    -webkit-box-shadow: none !important;
     257    box-shadow: none !important;
    380258}
    381259
    … …  
    396274form .login-remember {
    397275    font-weight: normal;
    398     margin-bottom: 16px;
     276    margin-bottom: 16px !important;
    399277}
    400278
    401279form .forgetmenot label,
    402280form .login-remember label {
    403     font-size: 0.8em;
     281    font-size:12px;
    404282    line-height: 1;
    405283    cursor: pointer;
    … …  
    407285
    408286form .submit {
    409     margin: 8px 0 0 0;
     287    margin: 8px 0 0 0 !important;
    410288    padding: 0;
    411289}
    … …  
    417295    margin: 2px 6px 16px 0;
    418296    height: 40px;
    419     outline: none;
    420297    color: #23282d;
    421298    font-weight: 400;
    422299}
    423300
    424 form input[type="text"],
    425 form input[type="password"],
    426 form input[type="checkbox"],
    427 form input[type="radio"] {
    428     background: #fbfbfb;
    429     border: none;
    430     -webkit-transition: all 0.1s ease;
    431     transition: all 0.1s ease;
    432 }
    433 form input[type="text"]:focus,
    434 form input[type="password"]:focus,
    435 form input[type="checkbox"]:focus,
    436 form input[type="radio"]:focus {
    437     background: #fff;
    438     -webkit-box-shadow: 0 0 0 2px #00A0D2, inset 0 1px 2px rgba(0,0,0,.5);
    439     box-shadow: 0 0 0 2px #00A0D2, inset 0 1px 2px rgba(0,0,0,.5);
    440 }
    441 
    442 form input[type="checkbox"], form input[type="radio"] {
    443     cursor: pointer;
    444     display: inline-block;
    445     width: 16px;
    446     min-width: 16px;
    447     height: 16px;
    448     margin: -4px 4px 0 0;
    449     outline: 0;
    450     padding: 0;
    451     text-align: center;
    452     vertical-align: middle;
    453     -webkit-appearance: none;
    454 }
    455 
    456 form input[type="checkbox"]:checked:before,
    457 form input[type="checkbox"]:checked:before,
    458 form input[type="radio"]:checked:before,
    459 form input[type="radio"]:checked:before {
    460     float: left;
    461     display: inline-block;
    462     vertical-align: middle;
    463     width: 16px;
    464     font: normal 21px/1 dashicons;
    465     speak: none;
    466     -webkit-font-smoothing: antialiased;
    467     -moz-osx-font-smoothing: grayscale;
    468 }
    469 
    470 form input[type="checkbox"]:checked:before {
    471     content: "\f147";
    472     margin: -3px 0 0 -4px;
    473     color: #1e8cbe;
    474 }
    475 
    476301form#authorize {
    477302    margin-bottom: 24px;
    478 }
    479 
    480 label {
    481     color: #B4B9BE;
    482303}
    483304
    … …  
    493314    text-align: center;
    494315    width: 100%;
    495 }
    496 
    497 .wrapper {
    498     padding: 8% 0 80px;
    499     min-height: 100%;
    500     position: relative;
    501 }
    502 
    503 .loginfooter {
    504     position: absolute;
    505     bottom: 0;
    506     width: 100%;
    507     height: 48px;
    508     text-align: center;
    509     text-transform: uppercase;
    510     letter-spacing: 1px;
    511     font-size: 0.8em;
    512 }
    513 
    514 @media (max-height: 499px) {
    515 
    516     .loginfooter {
    517         position: relative;
    518         bottom: inherit;
    519     }
    520316}
    521317
    … …  
    540336    margin-bottom: 24px;
    541337}
     338
     339@media (max-width:376px) {
     340    body, html {
     341        background:#FFF;
     342    }
     343    body.login {
     344        /* Using flexbox to control the vertical alignment of the form and white box */
     345        display:flex;
     346        align-items:center;
     347    }
     348    #login {
     349        -webkit-box-shadow:none;
     350        box-shadow:none;
     351        padding:20px 0;
     352    }
     353    #login #login_error {
     354        margin-left:0;
     355    }
     356}
     357
     358@media (max-width:352px) {
     359    #login {
     360        width:100%;
     361        padding:20px 24px;
     362    }
     363    #login h1 {
     364        padding:0 24px 24px;
     365    }
     366    #login h1 a {
     367        -webkit-background-size:100%;
     368        background-size:100%;
     369    }
     370}
Note: See TracChangeset for help on using the changeset viewer.