Bring the install/update screens in line with the new admin design. This affects:

* Creating a wp-config.php file * Installation * Database upgrade * Database repair * Readme.html * Network sites actions What's changed: * Bring background/text/link/border colours in line with mp6 * Bring fonts in line with mp6 (see note below) * Switch to device-width for the viewport and tweak margins etc so the layout works nicely on all device sizes * Switch to the new vector WordPress logo in the header to match the log in screen * Force table cells into rows in the <782px media query Fixes #25951, props johnbillion. git-svn-id: https://develop.svn.wordpress.org/trunk@26298 602fd350-edb4-49c9-b593-d223f7449a82
2013-11-21 00:20:13 +00:00 · 2013-11-21 00:20:13 +00:00 · 9e59f73a0b
commit 9e59f73a0b
parent c8e93a3e16
7 changed files with 106 additions and 41 deletions
--- a/src/readme.html
+++ b/src/readme.html
@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
+	<meta name="viewport" content="width=device-width" />
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 	<title>WordPress &#8250; ReadMe</title>
 	<link rel="stylesheet" href="wp-admin/css/install.css?ver=20100228" type="text/css" />
--- a/src/wp-admin/css/install.css
+++ b/src/wp-admin/css/install.css
@ -1,36 +1,38 @@
 html {
-	background: #f9f9f9;
+	background: #eee;
+	margin: 0 20px;
 }

 body {
 	background: #fff;
-	color: #333;
-	font-family: sans-serif;
-	margin: 2em auto;
-	padding: 1em 2em;
-	-webkit-border-radius: 3px;
-	border-radius: 3px;
-	border: 1px solid #dfdfdf;
+	color: #555;
+	font-family: "Open Sans", sans-serif;
+	margin: 140px auto 25px;
+	padding: 20px 20px 10px 20px;
 	max-width: 700px;
+	-webkit-font-smoothing: subpixel-antialiased;
+	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.13);
+	box-shadow: 0 1px 3px rgba(0,0,0,0.13);
 }

 a {
-	color: #21759b;
+	color: #0074a2;
 	text-decoration: none;
 }

 a:hover {
-	color: #d54e21;
+	color: #2ea2cc;
 }

 h1 {
-	border-bottom: 1px solid #dadada;
+	border-bottom: 1px solid #dedede;
 	clear: both;
 	color: #666;
-	font: 24px Georgia, "Times New Roman", Times, serif;
-	margin: 30px 0 0 0;
+	font-size: 24px;
+	margin: 30px 0;
 	padding: 0;
 	padding-bottom: 7px;
+	font-weight: normal;
 }

 h2 {
@ -44,7 +46,7 @@ p, li, dd, dt {
 }

 code, .code {
-	font-size: 14px;
+	font-family: Consolas, Monaco, monospace;
 }

 ul, ol, dl {
@ -64,25 +66,24 @@ abbr {
 	text-align:center
 }
 #logo a {
-	background-image: url('../images/wordpress-logo.png?ver=20120216');
-	background-size: 274px 63px;
-	background-position: top center;
+	background-image: url('../images/wordpress-logo.svg?ver=20131107');
+	background-size: 80px 80px;
+	background-position: center top;
 	background-repeat: no-repeat;
-	height: 67px;
+	color: #999;
+	height: 80px;
+	font-size: 20px;
+	font-weight: normal;
+	line-height: 1.3em;
+	margin: -130px auto 25px;
+	padding: 0;
+	text-decoration: none;
+	width: 80px;
 	text-indent: -9999px;
 	outline: none;
 	overflow: hidden;
 	display: block;
 }
-@media print,
-  (-o-min-device-pixel-ratio: 5/4),
-  (-webkit-min-device-pixel-ratio: 1.25),
-  (min-resolution: 120dpi) {
-	#logo a {
-		background-image: url('../images/wordpress-logo-2x.png?ver=20120412');
-		background-size: 274px 63px;
-	}
-}
 .step {
 	margin: 20px 0 15px;
 }
@ -95,10 +96,12 @@ abbr {
 }
 textarea {
 	border: 1px solid #dfdfdf;
-	-webkit-border-radius: 3px;
-	border-radius: 3px;
-	font-family: sans-serif;
-	width:  695px;
+	font-family: "Open Sans", sans-serif;
+	width: 100%;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	-ms-box-sizing: border-box; /* ie8 only */
+	box-sizing: border-box;
 }

 .form-table {
@ -119,7 +122,6 @@ textarea {
 	font-size: 14px;
 	text-align: left;
 	padding: 16px 20px 10px 0;
-	border-bottom: 8px solid #fff;
 	width: 140px;
 	vertical-align: top;
 }
@ -137,11 +139,14 @@ textarea {
 .form-table input {
 	line-height: 20px;
 	font-size: 15px;
-	padding: 2px;
-	border: 1px #dfdfdf solid;
-	-webkit-border-radius: 3px;
-	border-radius: 3px;
-	font-family: sans-serif;
+	padding: 3px 5px;
+	border: 1px solid #ddd;
+	box-shadow: inset 0 1px 2px rgba(0,0,0,0.07);
+}
+
+input,
+submit {
+	font-family: "Open Sans", sans-serif;
 }

 .form-table input[type=text],
@ -216,8 +221,6 @@ textarea {

 .message {
 	border: 1px solid #c00;
-	-webkit-border-radius: 3px;
-	border-radius:         3px;
 	padding: 0.5em 0.7em;
 	margin: 5px 0 15px;
 	background-color: #ffebe8;
@ -235,3 +238,57 @@ textarea {
 #pass2 {
 	direction: ltr;
 }
+
+@media only screen and (max-width: 799px) {
+	body {
+		margin-top: 115px;
+	}
+	#logo a {
+		margin: -125px auto 30px;
+	}
+}
+
+@media screen and ( max-width: 782px ) {
+
+	.form-table {
+		margin-top: 0;
+	}
+
+	.form-table th,
+	.form-table td {
+		display: block;
+		width: auto;
+		vertical-align: middle;
+	}
+
+	.form-table th {
+		padding: 20px 0 0;
+	}
+
+	.form-table td {
+		padding: 5px 0;
+		border: 0;
+		margin: 0;
+	}
+
+	textarea,
+	input {
+		font-size: 16px;
+	}
+
+	.form-table td input[type="text"],
+	.form-table td input[type="password"],
+	.form-table td select,
+	.form-table td textarea,
+	.form-table span.description {
+		width: 100%;
+		font-size: 16px;
+		line-height: 1.5;
+		padding: 7px 10px;
+		display: block;
+		max-width: none;
+		box-sizing: border-box;
+		-mox-box-sizing: border-box;
+	}
+
+}
--- a/src/wp-admin/install.php
+++ b/src/wp-admin/install.php
@ -56,6 +56,7 @@ function display_header() {
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
 <head>
+	<meta name="viewport" content="width=device-width" />
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 	<title><?php _e( 'WordPress &rsaquo; Installation' ); ?></title>
 	<?php
@ -249,8 +250,10 @@ switch($step) {
 		}
 		break;
 }
+if ( !wp_is_mobile() ) {
 ?>
 <script type="text/javascript">var t = document.getElementById('weblog_title'); if (t){ t.focus(); }</script>
+<?php } ?>
 <?php wp_print_scripts( 'user-profile' ); ?>
 </body>
 </html>
--- a/src/wp-admin/maint/repair.php
+++ b/src/wp-admin/maint/repair.php
@ -14,6 +14,7 @@ header( 'Content-Type: text/html; charset=utf-8' );
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
 <head>
+	<meta name="viewport" content="width=device-width" />
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 	<title><?php _e( 'WordPress &rsaquo; Database Repair' ); ?></title>
 	<?php
@ -26,7 +27,7 @@ header( 'Content-Type: text/html; charset=utf-8' );
 <?php

 if ( ! defined( 'WP_ALLOW_REPAIR' ) ) {
-	echo '<p>' . __( 'To allow use of this page to automatically repair database problems, please add the following line to your <code>wp-config.php</code> file. Once this line is added to your config, reload this page.' ) . "</p><code>define('WP_ALLOW_REPAIR', true);</code>";
+	echo '<p>' . __( 'To allow use of this page to automatically repair database problems, please add the following line to your <code>wp-config.php</code> file. Once this line is added to your config, reload this page.' ) . "</p><p><code>define('WP_ALLOW_REPAIR', true);</code></p>";
 } elseif ( isset( $_GET['repair'] ) ) {
 	$optimize = 2 == $_GET['repair'];
 	$okay = true;
@ -103,7 +104,7 @@ if ( ! defined( 'WP_ALLOW_REPAIR' ) ) {
 			$problem_output .= "$table: $problem\n";
 		echo '<p><textarea name="errors" id="errors" rows="20" cols="60">' . esc_textarea( $problem_output ) . '</textarea></p>';
 	} else {
-		echo '<p>' . __( 'Repairs complete. Please remove the following line from wp-config.php to prevent this page from being used by unauthorized users.' ) . "</p><code>define('WP_ALLOW_REPAIR', true);</code>";
+		echo '<p>' . __( 'Repairs complete. Please remove the following line from wp-config.php to prevent this page from being used by unauthorized users.' ) . "</p><p><code>define('WP_ALLOW_REPAIR', true);</code></p>";
 	}
 } else {
 	if ( isset( $_GET['referrer'] ) && 'is_blog_installed' == $_GET['referrer'] )
--- a/src/wp-admin/network/sites.php
+++ b/src/wp-admin/network/sites.php
@ -65,6 +65,7 @@ if ( isset( $_GET['action'] ) ) {
 		<!DOCTYPE html>
 		<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
 			<head>
+				<meta name="viewport" content="width=device-width" />
 				<title><?php _e( 'WordPress &rsaquo; Confirm your action' ); ?></title>

 				<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
--- a/src/wp-admin/setup-config.php
+++ b/src/wp-admin/setup-config.php
@ -99,6 +99,7 @@ function setup_config_display_header() {
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml"<?php if ( is_rtl() ) echo ' dir="rtl"'; ?>>
 <head>
+<meta name="viewport" content="width=device-width" />
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title><?php _e( 'WordPress &rsaquo; Setup Configuration File' ); ?></title>
 <link rel="stylesheet" href="css/install.css?ver=<?php echo preg_replace( '/[^0-9a-z\.-]/i', '', $wp_version ); ?>" type="text/css" />
--- a/src/wp-admin/upgrade.php
+++ b/src/wp-admin/upgrade.php
@ -50,6 +50,7 @@ else
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
 <head>
+	<meta name="viewport" content="width=device-width" />
 	<meta http-equiv="Content-Type" content="<?php bloginfo( 'html_type' ); ?>; charset=<?php echo get_option( 'blog_charset' ); ?>" />
 	<title><?php _e( 'WordPress &rsaquo; Update' ); ?></title>
 	<?php