WordPress.org

Make WordPress Core

Ticket #12506: login-css+wp-login.patch

File login-css+wp-login.patch, 9.7 KB (added by F J Kaiser, 11 years ago)

includes: css reworked & the minor changes to wp-login.php that are needed

  • wp-admin/css/login.dev.css

     
    1 * { margin: 0; padding: 0; }
    2 
     1/*
     2* The following is additional:
     3* Removing dotted borders around links & buttons as far as possible
     4*/
     5button::-moz-focus-inner,
     6input[type="reset"]::-moz-focus-inner,
     7input[type="button"]::-moz-focus-inner,
     8input[type="submit"]::-moz-focus-inner,
     9input[type="file"] > input[type="button"]::-moz-focus-inner {
     10        padding: 0;
     11        border: none;
     12}
     13* {
     14        margin: 0;
     15        padding: 0;
     16}
    317body {
    4         padding-top: 30px;
    5         font: 11px "Lucida Grande", Verdana, Arial, "Bitstream Vera Sans", sans-serif;
    6         background: url(../images/login-header.png?ver=20100403) top left repeat-x;
     18        background: #F9F9F9 url(../images/login-header.png?ver=20100403) top left repeat-x;
     19        border-top: 30px solid #464646;
     20        font: 11px "Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif;
     21        color: #333333; /* not needed for standard installation, but here to make every written stuff on the page inherit and consistent. */
    722}
    8 
     23/*
     24* Link to Blog
     25*/
     26#backtoblog,
     27#backtoblog a {
     28        position: absolute;
     29        top: 4px;
     30        left: 15px;
     31        color: #CCCCCC;
     32        text-decoration: none;
     33        white-space: nowrap;
     34}
     35#backtoblog a:hover,
     36#backtoblog a:active,
     37#backtoblog a:focus {
     38        color:#fff;
     39}
     40#login {
     41        margin: 7em auto;
     42        width: 320px;
     43}
     44/*
     45* Wordpress-Logo
     46*/
     47h1 a {
     48        background: url("../images/logo-login.gif") no-repeat scroll center top transparent;
     49        display: block;
     50        height: 67px;
     51        overflow: hidden;
     52        padding: 0 0 15px 0;
     53        text-indent: -9999px;
     54        width: 326px;
     55        color: #21759B;
     56}
     57/*
     58* Messageboxes
     59*/
     60#login_error,
     61.login_error,
     62.error,
     63.updated,
     64.message,
     65.plugin-message { /* added for plugins: <div class="plugin-message"> */
     66        margin: 0 0 16px 8px;
     67        padding: 12px;
     68        -moz-border-radius: 3px;
     69        -khtml-border-radius: 3px;
     70        -webkit-border-radius: 3px;
     71        border-radius: 3px;
     72        border: 1px solid;
     73        color: #333333;
     74}
     75.updated,
     76.message,
     77.plugin-message-yellow { /* added for plugins: <div class="plugin-message-yellow"> */
     78        border-color: #E6DB55;
     79        background-color: #FFFFE0;
     80}
     81#login_error,
     82.login_error,
     83.plugin-message-error { /* added for plugins: <div class="plugin-message-error"> */
     84        border-color: #CC0000;
     85        background-color: #FFEBE8;
     86}
     87/*
     88* Form
     89*/
    990form {
    10         margin-left: 8px;
    11         padding: 16px 16px 40px 16px;
    12         font-weight: normal;
    13         -moz-border-radius: 11px;
    14         -khtml-border-radius: 11px;
    15         -webkit-border-radius: 11px;
    16         border-radius: 5px;
    17         background: #fff;
    18         border: 1px solid #e5e5e5;
    1991        -moz-box-shadow: rgba(200,200,200,1) 0 4px 18px;
    2092        -webkit-box-shadow: rgba(200,200,200,1) 0 4px 18px;
    2193        -khtml-box-shadow: rgba(200,200,200,1) 0 4px 18px;
    2294        box-shadow: rgba(200,200,200,1) 0 4px 18px;
    23 }
    24 
    25 form .forgetmenot {
    26         font-weight: normal;
    27         float: left;
    28         margin-bottom: 0;
    29 }
    30 
    31 .button-primary {
    32         font-family: "Lucida Grande", Verdana, Arial, "Bitstream Vera Sans", sans-serif;
    33         padding: 3px 10px;
    34         border: none;
    35         font-size: 12px;
    36         border-width: 1px;
    37         border-style: solid;
     95        margin: 0 0 0 8px;
     96        padding: 16px 16px 40px;
     97        border: 1px solid #E5E5E5;
    3898        -moz-border-radius: 11px;
    3999        -khtml-border-radius: 11px;
    40100        -webkit-border-radius: 11px;
    41         border-radius: 11px;
    42         cursor: pointer;
    43         text-decoration: none;
    44         margin-top: -3px;
     101        border-radius: 5px;
     102        font: normal 13px;
     103        color: #777777;
     104        background: none repeat scroll 0 0 #FFFFFF;
    45105}
    46 
    47 #login form p {
    48         margin-bottom: 0;
     106form p {
     107        margin-bottom:0;
    49108}
    50 
    51 label {
    52         color: #777;
    53         font-size: 13px;
     109form  /* p */ .forgetmenot {
     110        float: left;
    54111}
    55 
    56 form .forgetmenot label {
     112form  /* p */ .forgetmenot label {
    57113        font-size: 11px;
    58114        line-height: 19px;
    59115}
    60 
    61 form .submit,
    62 .alignright {
    63         float: right;
     116input {
     117        color:#555555;
    64118}
    65 
    66 form p {
    67         margin-bottom: 24px;
     119input.user_data,
     120input#user_pass,
     121input#user_login,
     122input#user_email {
     123        margin: 2px 6px 16px 0;
     124        padding: 3px;
     125        width: 97%;
     126        border: 1px solid #E5E5E5;
     127        font-size: 24px;
     128        background: none repeat scroll 0 0 #FBFBFB;
    68129}
    69 
    70 h1 a {
    71         background: url(../images/logo-login.gif) no-repeat top center;
    72         width: 326px;
    73         height: 67px;
    74         text-indent: -9999px;
    75         overflow: hidden;
    76         padding-bottom: 15px;
    77         display: block;
     130.button-primary {
     131        -moz-border-radius: 11px;
     132        -khtml-border-radius: 11px;
     133        -webkit-border-radius: 11px;
     134        border-radius: 11px;
     135        background: url("../images/button-grad.png") repeat-x scroll left top #FFFFFF;
     136        margin: -3px 0 0 0;
     137        padding: 3px 10px;
     138        float: right;
     139        border: 1px solid #298CBA;
     140        color: #FFFFFF;
     141        font: bold 12px "Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif;
     142        text-decoration: none;
     143        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
     144        cursor: pointer;
    78145}
    79 
    80 #nav {
    81         text-shadow: rgba(255,255,255,1) 0 1px 0;
     146input.button-primary:active,
     147button.button-primary:active,
     148a.button-primary:active {
     149        background:url("../images/button-grad-active.png") repeat-x scroll left top #21759B;
     150        color:#EAF2FA;
    82151}
    83 
    84 #backtoblog a {
    85         position: absolute;
    86         top: 8px;
    87         left: 15px;
    88         text-decoration: none;
     152input.button-primary:hover,
     153button.button-primary:hover,
     154a.button-primary:hover,
     155a.button-primary:focus,
     156a.button-primary:active {
     157        border-color:#13455B;
     158        color:#EAF2FA;
    89159}
    90 
    91 #login { width: 320px; margin: 7em auto; }
    92 
    93 #login_error,
    94 .message {
    95         margin: 0 0 16px 8px;
    96         border-width: 1px;
    97         border-style: solid;
    98         padding: 12px;
    99         -moz-border-radius: 3px;
    100         -khtml-border-radius: 3px;
    101         -webkit-border-radius: 3px;
    102         border-radius: 3px;
     160.button-disabled,
     161.button[disabled],
     162.button:disabled,
     163a.button.disabled {
     164        border-color:#DDDDDD;
     165        color:#AAAAAA;
     166        background:none repeat scroll 0 0 #298CBA;
     167        color:#9FD0D5;
    103168}
    104 
     169/*
     170* Link to lost password or login
     171*/
     172.login_link,
    105173#nav {
    106174        margin: 0 0 0 8px;
    107175        padding: 16px;
    108176}
    109 
    110 #user_pass,
    111 #user_login,
    112 #user_email {
    113         font-size: 24px;
    114         width: 97%;
    115         padding: 3px;
    116         margin-top: 2px;
    117         margin-right: 6px;
    118         margin-bottom: 16px;
    119         border: 1px solid #e5e5e5;
    120         background: #fbfbfb;
     177.login_link *,
     178#nav * {
     179        color: #21759B;
    121180}
    122 
    123 input {
    124         color: #555;
    125 }
    126 
    127181.clear {
    128182        clear: both;
    129 }
     183}
     184 No newline at end of file
  • wp-login.php

     
    6363        <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    6464<?php
    6565        wp_admin_css( 'login', true );
    66         wp_admin_css( 'colors-fresh', true );
    6766
    6867        if ( $is_iphone ) { ?>
    6968        <meta name="viewport" content="width=320; initial-scale=0.9; maximum-scale=1.0; user-scalable=0;" />
     
    110109                        }
    111110                }
    112111                if ( !empty($errors) )
    113                         echo '<div id="login_error">' . apply_filters('login_errors', $errors) . "</div>\n";
     112                        echo '<div id="login_error" class="login_error">' . apply_filters('login_errors', $errors) . "</div>\n";
    114113                if ( !empty($messages) )
    115114                        echo '<p class="message">' . apply_filters('login_messages', $messages) . "</p>\n";
    116115        }
     
    385384<form name="lostpasswordform" id="lostpasswordform" action="<?php echo site_url('wp-login.php?action=lostpassword', 'login_post') ?>" method="post">
    386385        <p>
    387386                <label><?php _e('Username or E-mail:') ?><br />
    388                 <input type="text" name="user_login" id="user_login" class="input" value="<?php echo esc_attr($user_login); ?>" size="20" tabindex="10" /></label>
     387                <input type="text" name="user_login" id="user_login" class="input user_data" value="<?php echo esc_attr($user_login); ?>" size="20" tabindex="10" /></label>
    389388        </p>
    390389<?php do_action('lostpassword_form'); ?>
    391390        <input type="hidden" name="redirect_to" value="<?php echo esc_attr( $redirect_to ); ?>" />
     
    462461<form name="registerform" id="registerform" action="<?php echo site_url('wp-login.php?action=register', 'login_post') ?>" method="post">
    463462        <p>
    464463                <label><?php _e('Username') ?><br />
    465                 <input type="text" name="user_login" id="user_login" class="input" value="<?php echo esc_attr(stripslashes($user_login)); ?>" size="20" tabindex="10" /></label>
     464                <input type="text" name="user_login" id="user_login" class="input user_data" value="<?php echo esc_attr(stripslashes($user_login)); ?>" size="20" tabindex="10" /></label>
    466465        </p>
    467466        <p>
    468467                <label><?php _e('E-mail') ?><br />
    469                 <input type="text" name="user_email" id="user_email" class="input" value="<?php echo esc_attr(stripslashes($user_email)); ?>" size="25" tabindex="20" /></label>
     468                <input type="text" name="user_email" id="user_email" class="input user_data" value="<?php echo esc_attr(stripslashes($user_email)); ?>" size="25" tabindex="20" /></label>
    470469        </p>
    471470<?php do_action('register_form'); ?>
    472471        <p id="reg_passmail"><?php _e('A password will be e-mailed to you.') ?></p>
     
    577576<form name="loginform" id="loginform" action="<?php echo site_url('wp-login.php', 'login_post') ?>" method="post">
    578577        <p>
    579578                <label><?php _e('Username') ?><br />
    580                 <input type="text" name="log" id="user_login" class="input" value="<?php echo esc_attr($user_login); ?>" size="20" tabindex="10" /></label>
     579                <input type="text" name="log" id="user_login" class="input user_data" value="<?php echo esc_attr($user_login); ?>" size="20" tabindex="10" /></label>
    581580        </p>
    582581        <p>
    583582                <label><?php _e('Password') ?><br />
    584                 <input type="password" name="pwd" id="user_pass" class="input" value="" size="20" tabindex="20" /></label>
     583                <input type="password" name="pwd" id="user_pass" class="input user_data" value="" size="20" tabindex="20" /></label>
    585584        </p>
    586585<?php do_action('login_form'); ?>
    587586        <p class="forgetmenot"><label><input name="rememberme" type="checkbox" id="rememberme" value="forever" tabindex="90" /> <?php esc_attr_e('Remember Me'); ?></label></p>