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

File login-css+wp-login.patch, 9.7 KB (added by F J Kaiser, 3 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>