WordPress.org
Get WordPress

Making WordPress.org

Changeset 2492


Ignore:
Timestamp:
02/10/2016 08:05:09 PM (11 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.