Ticket #48222: 48222.5.diff

src/wp-admin/css/login.css

@@ -79 +79 @@
         margin-bottom: 15px;
 }
 
+.login .wp-pwd-label-wrap:after {
+        content: "";
+        display: table;
+        clear: both;
+}
+
+.login .wp-pwd-label-wrap label {
+        float: left;
+}
+
 .login .button.wp-hide-pw {
+        float: right;
         background: transparent;
         border: 1px solid transparent;
         box-shadow: none;
-        font-size: 14px;
-        line-height: 2;
-        width: 2.5rem;
-        height: 2.5rem;
-        min-width: 40px;
-        min-height: 40px;
+        line-height: 2.15;
+        font-size: 12px;
+        height: 1.25rem;
+        min-height: 0;
         margin: 0;
-        padding: 5px 9px;
-        position: absolute;
-        right: 0;
-        top: 0;
+        padding: 0;
+        position: relative;
+        top: -2px;
+}
+
+@media screen and (max-width: 782px) {
+        .login .button.wp-hide-pw {
+                line-height: 2.4;
+        }
 }
 
 .login .button.wp-hide-pw:hover {
@@ -115 +129 @@
 }
 
 .login .button.wp-hide-pw .dashicons {
-        width: 1.25rem;
+        width: 1rem;
         height: 1.25rem;
-        top: 0.25rem;
+        top: 0.35rem;
+        font-size: 16px;
 }
 
 .login .wp-pwd {

src/wp-login.php

@@ -962 +962 @@
                         <input type="hidden" id="user_login" value="<?php echo esc_attr( $rp_login ); ?>" autocomplete="off" />
 
                         <div class="user-pass1-wrap">
-                                <p>
+                                <p class="wp-pwd-label-wrap">
                                         <label for="pass1"><?php _e( 'New password' ); ?></label>
+                                        <button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>">
+                                                <span class="dashicons dashicons-hidden" aria-hidden="true"></span> <?php _e( 'Hide' ) ?>
+                                        </button>
                                 </p>
 
                                 <div class="wp-pwd">
                                         <input type="password" data-reveal="1" data-pw="<?php echo esc_attr( wp_generate_password( 16 ) ); ?>" name="pass1" id="pass1" class="input password-input" size="24" value="" autocomplete="off" aria-describedby="pass-strength-result" />
 
-                                        <button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>">
-                                                <span class="dashicons dashicons-hidden" aria-hidden="true"></span>
-                                        </button>
                                         <div id="pass-strength-result" class="hide-if-no-js" aria-live="polite"><?php _e( 'Strength indicator' ); ?></div>
                                 </div>
                                 <div class="pw-weak">
@@ -1368 +1368 @@
                         </p>
 
                         <div class="user-pass-wrap">
-                                <label for="user_pass"><?php _e( 'Password' ); ?></label>
-                                <div class="wp-pwd">
-                                        <input type="password" name="pwd" id="user_pass"<?php echo $aria_describedby_error; ?> class="input password-input" value="" size="20" />
-                                        <button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Show password' ); ?>">
+                                <div class="wp-pwd-label-wrap">
+                                        <label for="user_pass"><?php _e( 'Password' ); ?></label>
+                                        <button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Show' ); ?>">
                                                 <span class="dashicons dashicons-visibility" aria-hidden="true"></span>
+                                                <?php _e( 'Show' ); ?>
                                         </button>
                                 </div>
+                                <div class="wp-pwd">
+                                        <input type="password" name="pwd" id="user_pass"<?php echo $aria_describedby_error; ?> class="input password-input" value="" size="20" />
+                                </div>
                         </div>
                         <?php