Better WordPress Login Page

login.php

<?php
/**
 * CSS rules for WordPress Login page.
 *
 * @package ChetanP
 */

/**
 * CSS for wp-login.php page
 */
function custom_login_css() {
	$main_color  = '#8743ca';
	$hover_color = '#f4ed22';
	?>

	<style type="text/css">
	body,
	html {
		overflow-x: hidden;
	}

	body.login { 
		background: #ffffff;
		padding: 0;
		height: 100%;
	}

	body.login a {
		outline: none !important;
		box-shadow: none !important;
	}

	body.login div#login {
		padding: 20px;
		box-shadow: none;
		overflow: hidden;
		margin: 2% auto;
		box-sizing: border-box;
	}

	body.login div#login h1 {
		margin-bottom: 10px;
		border: none;
		padding: 10px;
	}

	body.login div#login h1 a {
		background-image: url('<?php echo esc_html( get_stylesheet_directory_uri() ); ?>/logo.png');
		background-size: contain;
		width: 250px;
		height: 80px;
		background-position: center center;
		display: inline-block;
		margin-bottom: 0px;
	}

	body.login div#login form {
		box-shadow: none;
		background-color: transparent;
		padding: 0;
		margin: 0;
	}

	body.login div#login form p label {
		color: <?php echo esc_attr( $main_color ); ?>;
		font-weight: 700;
	}

	body.login input {
		-webkit-appearance: none;
		font-size: 14px; 
		border: 2px solid <?php echo esc_attr( $main_color ); ?> !important;
		border-radius: 0 !important;
		box-shadow: none;
		color: <?php echo esc_attr( $main_color ); ?>;
		font-size: 14px !important;
		font-weight: normal;
		height: 36px; 
		padding: 0px 10px !important;
		margin-top: 5px !important;
		outline: 0;
		text-shadow: none !important;
		margin-bottom: 0 !important;
	}

	body.login input:focus {
		box-shadow: none !important; 
	}

	body.login input[type=email],
	body.login input[type=password],
	body.login input[type=text] {
		background-color: transparent !important;
	}

	body.login div#login form#loginform input#rememberme {
		height: 16px;
		padding: 0 !important;
		margin-top: 0 !important;
	}

	body.login div#login form#lostpasswordform input#user_login,
	body.login div#login form#registerform input#user_login,
	body.login div#login form#loginform input#user_login {
		padding-left: 30px !important;
		margin-top: 8px;
		margin-bottom: 0px;
		background-color: #fff;
	}

	body.login div#login form#registerform input#user_email,
	body.login div#login form#loginform input#user_pass {
		padding-left: 30px !important;
		margin-top: 8px;
		margin-bottom: 0px;
		background-color: #fff;
	}

	label[for=user_email],
	label[for=user_pass],
	label[for=user_login] {
		display: block;
		position: relative;
		margin-bottom: 20px;
		z-index: 20;
	}

	label[for=user_login]:after {
		content: "\f110";
		font-family: "dashicons";
		color: <?php echo esc_attr( $main_color ); ?>;
		position: absolute;
		font-size: 24px;
		z-index: 10;
		left: 5px;
		bottom: 8px;
		line-height: 20px;
	}

	label[for=user_pass]:after {
		content: "\f160";
		font-family: "dashicons";
		color: <?php echo esc_attr( $main_color ); ?>;
		position: absolute;
		font-size: 24px;
		z-index: 10;
		left: 5px;
		bottom: 8px;
		line-height: 20px;
	}

	label[for=user_email]:after {
		content: "\f465";
		font-family: "dashicons";
		color: <?php echo esc_attr( $main_color ); ?>;
		position: absolute;
		font-size: 24px;
		z-index: 10;
		left: 5px;
		bottom: 8px;
		line-height: 20px;
	}

	body.login div#login form#loginform p.forgetmenot {
		float: right;
	}

	body.login div#login p.submit {
		float: left;
	}

	body.login p.submit input#wp-submit { 
		height: 32px;
		background-color: <?php echo esc_attr( $main_color ); ?>;
		border: none !important; 
		border-radius: 0;
		box-shadow: none;
		font-size: 14px;
		padding: 0px 16px !important;
		margin-top: 0 !important;
		color: <?php echo esc_attr( $hover_color ); ?>; 
		line-height: 30px;
		-webkit-appearance: none;
	}

	body.login input#wp-submit:hover {
		background-color: <?php echo esc_attr( $hover_color ); ?> !important;
		color: <?php echo esc_attr( $main_color ); ?> !important;
	}

	body.login div#login p#backtoblog {
		float: left;
	}

	body.login div#login p#nav {
		float: right;
	}

	body.login div#login p#backtoblog,
	body.login div#login p#nav {
		padding: 0;
		float: none;
		text-align: center;
		margin: 10px 0;
	}

	body.login div#login p#backtoblog a,
	body.login div#login p#nav a,
	body.login div#login a {
		color: <?php echo esc_attr( $main_color ); ?>;
		font-size: 13px;
		line-height: 30px;
	}

	body.login div#login a:hover { 
		color: <?php echo esc_attr( $hover_color ); ?> !important;
	}

	body.login .message {
		color: <?php echo esc_attr( $main_color ); ?>;
		border: none;
		box-shadow: none;
		background-color: transparent;
		padding: 10px 0px;
	}

	body.login #login_error {
		padding: 10px 0;
		background: none;
		border-left: none;
		box-shadow: none;
		color: #dd3d36;
	}

	body.login div#login [id*="icwp_wpsf_login_"] {
		background: none !important;
		border: none !important;
		margin: 0 !important;
		border-radius: 0 !important;
		color: <?php echo esc_attr( $main_color ); ?>;
		font-weight: 700;
		margin-bottom: 20px !important;
		padding: 0 !important;
	}

	body.login div#login input[type="checkbox"],
	body.login div#login [id*="icwp_wpsf_login_"] input {
		height: 18px !important;
		width: 18px !important;
		margin-right: 0;
		margin-top: 0 !important;
		vertical-align: middle !important;
		margin-right: 6px !important;
		padding: 0 !important;
		background: transparent !important;
	}

	body.login div#login input[type="checkbox"]:checked::before {
		color: <?php echo esc_attr( $main_color ); ?>;
	}

	</style>
<?php
}
add_action( 'login_head', 'custom_login_css' );

/**
 * Disables shaking of form.
 */
function cp_login_head() {
	remove_action( 'login_head', 'wp_shake_js', 10 );
}
add_action( 'login_head', 'cp_login_head' );

/**
 * Adds website URL to logo.
 */
function cp_login_logo_url() {
	return home_url();
}
add_filter( 'login_headerurl', 'cp_login_logo_url' );

/**
 * Adds website title to logo.
 */
function cp_login_logo_url_title() {
	return get_bloginfo( 'name' );
}
add_filter( 'login_headertitle', 'cp_login_logo_url_title' );