Buttons:

- Update the install/initial configuration/repair screens buttons, props DrewAPicture - Fix the welcome screen buttons and fine-tune the buttons css, props lessbloat fixes #21598 git-svn-id: http://core.svn.wordpress.org/trunk@22314 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2024-12-22 17:18:32 +01:00 · 2012-10-26 19:40:39 +00:00 · 2012-10-26 19:40:39 +00:00 · efbc9d2336
commit efbc9d2336
parent 2677205fba
9 changed files with 115 additions and 100 deletions
--- a/wp-admin/css/ie.css
+++ b/wp-admin/css/ie.css
@ -237,34 +237,44 @@ table.fixed td {
 	width: 98%;
 }

-button,
+.button,
 input[type="reset"],
 input[type="button"],
 input[type="submit"] {
-	padding: 2px 8px;
+	padding: 0 8px;
+	line-height: 20px;
+	height: auto;
 }

-button.button-large,
+.button.button-large,
 input[type="reset"].button-large,
 input[type="button"].button-large,
 input[type="submit"].button-large {
-	padding: 4px 12px;
+	padding: 0 10px;
+	line-height: 24px;
+	height: auto;
 }

-button.button-small,
+.button.button-small,
 input[type="reset"].button-small,
 input[type="button"].button-small,
 input[type="submit"].button-small {
-	padding: 0 8px;
+	padding: 0 6px;
+	line-height: 16px;
+	height: auto;
 }

 a.button {
 	margin: 1px;
-	padding: 3px 8px;
+	padding: 1px 9px 2px;
+}
+
+a.button.button-large {
+	padding: 1px 11px 2px;
 }

 a.button.button-small {
-	padding: 1px 8px;
+	padding: 1px 7px 2px;
 }

 #screen-options-wrap {
--- a/wp-admin/css/install.css
+++ b/wp-admin/css/install.css
@ -70,49 +70,9 @@ abbr {
 	text-align: left;
 	padding: 0;
 }
-
-.submit input,
-.button,
-.button-secondary {
-	font-family: sans-serif;
-	text-decoration: none;
-	font-size: 14px !important;
-	line-height: 16px;
-	padding: 6px 12px;
-	cursor: pointer;
-	border: 1px solid #bbb;
-	color: #464646;
-	-webkit-border-radius: 15px;
-	border-radius:         15px;
-	-webkit-box-sizing: content-box;
-	-moz-box-sizing:    content-box;
-	box-sizing:         content-box;
-	background: #f2f2f2;
-	background-image: -webkit-gradient(linear, left bottom, left top, from(#ededed), to(#fff));
-	background-image: -webkit-linear-gradient(bottom, #ededed, #fff);
-	background-image:    -moz-linear-gradient(bottom, #ededed, #fff);
-	background-image:      -o-linear-gradient(bottom, #ededed, #fff);
-	background-image: linear-gradient(to top, #ededed, #fff);
+.step .button-large {
+	font-size: 14px;
 }
-
-.button:hover,
-.button-secondary:hover,
-.submit input:hover {
-	color: #000;
-	border-color: #666;
-}
-
-.button:active,
-.submit input:active,
-.button-secondary:active {
-	background: #eee;
-	background-image: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
-	background-image: -webkit-linear-gradient(top, #ededed, #fff);
-	background-image:    -moz-linear-gradient(top, #ededed, #fff);
-	background-image:      -o-linear-gradient(top, #ededed, #fff);
-	background-image: linear-gradient(to bottom, #ededed, #fff);
-}
-
 textarea {
 	border: 1px solid #dfdfdf;
 	-webkit-border-radius: 3px;
--- a/wp-admin/css/wp-admin.css
+++ b/wp-admin/css/wp-admin.css
@ -2262,9 +2262,11 @@ html.wp-toolbar {
 }

 .welcome-panel .welcome-button {
-	margin: -9px 0 3px;
-	padding: 1em 3em;
-	font: normal 15px/1 sans-serif;
+	font: normal 15px sans-serif;
+	height: 46px;
+	line-height: 44px;
+    margin: -9px 0 3px;
+    padding: 0 36px;
 }

 .welcome-panel-content {
--- a/wp-admin/install.php
+++ b/wp-admin/install.php
@ -58,7 +58,10 @@ function display_header() {
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 	<title><?php _e( 'WordPress &rsaquo; Installation' ); ?></title>
-	<?php wp_admin_css( 'install', true ); ?>
+	<?php 
+	wp_admin_css( 'install', true );
+	wp_admin_css( 'buttons', true );
+	?>
 </head>
 <body<?php if ( is_rtl() ) echo ' class="rtl"'; ?>>
 <h1 id="logo"><img alt="WordPress" src="images/wordpress-logo.png?ver=20120216" /></h1>
@ -134,7 +137,7 @@ function display_setup_form( $error = null ) {
 			<td colspan="2"><label><input type="checkbox" name="blog_public" value="1" <?php checked( $blog_public ); ?> /> <?php _e( 'Allow search engines to index this site.' ); ?></label></td>
 		</tr>
 	</table>
-	<p class="step"><input type="submit" name="Submit" value="<?php esc_attr_e( 'Install WordPress' ); ?>" class="button" /></p>
+	<p class="step"><input type="submit" name="Submit" value="<?php esc_attr_e( 'Install WordPress' ); ?>" class="button button-large" /></p>
 </form>
 <?php
 } // end display_setup_form()
@ -142,7 +145,7 @@ function display_setup_form( $error = null ) {
 // Let's check to make sure WP isn't already installed.
 if ( is_blog_installed() ) {
 	display_header();
-	die( '<h1>' . __( 'Already Installed' ) . '</h1><p>' . __( 'You appear to have already installed WordPress. To reinstall please clear your old database tables first.' ) . '</p><p class="step"><a href="../wp-login.php" class="button">' . __('Log In') . '</a></p></body></html>' );
+	die( '<h1>' . __( 'Already Installed' ) . '</h1><p>' . __( 'You appear to have already installed WordPress. To reinstall please clear your old database tables first.' ) . '</p><p class="step"><a href="../wp-login.php" class="button button-large">' . __( 'Log In' ) . '</a></p></body></html>' );
 }

 $php_version    = phpversion();
@ -241,7 +244,7 @@ switch($step) {
 	</tr>
 </table>

-<p class="step"><a href="../wp-login.php" class="button"><?php _e( 'Log In' ); ?></a></p>
+<p class="step"><a href="../wp-login.php" class="button button-large"><?php _e( 'Log In' ); ?></a></p>

 <?php
 		}
--- a/wp-admin/maint/repair.php
+++ b/wp-admin/maint/repair.php
@ -16,7 +16,10 @@ header( 'Content-Type: text/html; charset=utf-8' );
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 	<title><?php _e( 'WordPress &rsaquo; Database Repair' ); ?></title>
-	<?php wp_admin_css( 'install', true ); ?>
+	<?php 
+	wp_admin_css( 'install', true );
+	wp_admin_css( 'buttons', true );
+	?>
 </head>
 <body>
 <h1 id="logo"><img alt="WordPress" src="../images/wordpress-logo.png?ver=20120216" /></h1>
@ -102,9 +105,9 @@ if ( ! defined( 'WP_ALLOW_REPAIR' ) ) {
 	else
 		echo '<p>' . __( 'WordPress can automatically look for some common database problems and repair them. Repairing can take a while, so please be patient.' ) . '</p>';
 ?>
-	<p class="step"><a class="button" href="repair.php?repair=1"><?php _e( 'Repair Database' ); ?></a></p>
+	<p class="step"><a class="button button-large" href="repair.php?repair=1"><?php _e( 'Repair Database' ); ?></a></p>
 	<p><?php _e( 'WordPress can also attempt to optimize the database. This improves performance in some situations. Repairing and optimizing the database can take a long time and the database will be locked while optimizing.' ); ?></p>
-	<p class="step"><a class="button" href="repair.php?repair=2"><?php _e( 'Repair and Optimize Database' ); ?></a></p>
+	<p class="step"><a class="button button-large" href="repair.php?repair=2"><?php _e( 'Repair and Optimize Database' ); ?></a></p>
 <?php
 }
 ?>
--- a/wp-admin/setup-config.php
+++ b/wp-admin/setup-config.php
@ -96,6 +96,7 @@ function setup_config_display_header() {
 <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" />
+<link rel="stylesheet" href="../wp-includes/css/buttons.css?ver=<?php echo preg_replace( '/[^0-9a-z\.-]/i', '', $wp_version ); ?>" type="text/css" />

 </head>
 <body<?php if ( is_rtl() ) echo ' class="rtl"'; ?>>
@ -119,7 +120,7 @@ switch($step) {
 <p><strong><?php _e( "If for any reason this automatic file creation doesn&#8217;t work, don&#8217;t worry. All this does is fill in the database information to a configuration file. You may also simply open <code>wp-config-sample.php</code> in a text editor, fill in your information, and save it as <code>wp-config.php</code>." ); ?></strong></p>
 <p><?php _e( "In all likelihood, these items were supplied to you by your Web Host. If you do not have this information, then you will need to contact them before you can continue. If you&#8217;re all ready&hellip;" ); ?></p>

-<p class="step"><a href="setup-config.php?step=1<?php if ( isset( $_GET['noapi'] ) ) echo '&amp;noapi'; ?>" class="button"><?php _e( 'Let&#8217;s go!' ); ?></a></p>
+<p class="step"><a href="setup-config.php?step=1<?php if ( isset( $_GET['noapi'] ) ) echo '&amp;noapi'; ?>" class="button button-large"><?php _e( 'Let&#8217;s go!' ); ?></a></p>
 <?php
 	break;

@ -156,7 +157,7 @@ switch($step) {
 		</tr>
 	</table>
 	<?php if ( isset( $_GET['noapi'] ) ) { ?><input name="noapi" type="hidden" value="1" /><?php } ?>
-	<p class="step"><input name="submit" type="submit" value="<?php echo htmlspecialchars( __( 'Submit' ), ENT_QUOTES ); ?>" class="button" /></p>
+	<p class="step"><input name="submit" type="submit" value="<?php echo htmlspecialchars( __( 'Submit' ), ENT_QUOTES ); ?>" class="button button-large" /></p>
 </form>
 <?php
 	break;
@ -165,7 +166,7 @@ switch($step) {
 	foreach ( array( 'dbname', 'uname', 'pwd', 'dbhost', 'prefix' ) as $key )
 		$$key = trim( stripslashes( $_POST[ $key ] ) );

-	$tryagain_link = '</p><p class="step"><a href="setup-config.php?step=1" onclick="javascript:history.go(-1);return false;" class="button">' . __( 'Try again' ) . '</a>';
+	$tryagain_link = '</p><p class="step"><a href="setup-config.php?step=1" onclick="javascript:history.go(-1);return false;" class="button button-large">' . __( 'Try again' ) . '</a>';

 	if ( empty( $prefix ) )
 		wp_die( __( '<strong>ERROR</strong>: "Table Prefix" must not be empty.' . $tryagain_link ) );
@ -264,7 +265,7 @@ switch($step) {
 		}
 ?></textarea>
 <p><?php _e( 'After you&#8217;ve done that, click &#8220;Run the install.&#8221;' ); ?></p>
-<p class="step"><a href="install.php" class="button"><?php _e( 'Run the install' ); ?></a></p>
+<p class="step"><a href="install.php" class="button button-large"><?php _e( 'Run the install' ); ?></a></p>
 <script>
 (function(){
 var el=document.getElementById('wp-config');
@ -284,7 +285,7 @@ el.select();
 ?>
 <p><?php _e( "All right sparky! You&#8217;ve made it through this part of the installation. WordPress can now communicate with your database. If you are ready, time now to&hellip;" ); ?></p>

-<p class="step"><a href="install.php" class="button"><?php _e( 'Run the install' ); ?></a></p>
+<p class="step"><a href="install.php" class="button button-large"><?php _e( 'Run the install' ); ?></a></p>
 <?php
 	endif;
 	break;
--- a/wp-includes/css/buttons.css
+++ b/wp-includes/css/buttons.css
@ -39,12 +39,12 @@ TABLE OF CONTENTS:
 .button-primary,
 .button-secondary {
 	display: inline-block;
-	vertical-align: middle;
 	text-decoration: none;
 	font-size: 12px;
-	line-height: 1.45em;
+	line-height: 23px;
+	height: 24px;
 	margin: 0;
-	padding: 3px 10px;
+	padding: 0 10px 1px;
 	cursor: pointer;
 	border-width: 1px;
 	border-style: solid;
@ -61,18 +61,24 @@ button::-moz-focus-inner,
 input[type="reset"]::-moz-focus-inner,
 input[type="button"]::-moz-focus-inner,
 input[type="submit"]::-moz-focus-inner {
-	border: 1px solid transparent;
+	border-width: 1px 0;
+	border-style: solid none;
+	border-color: transparent;
 	padding: 0;
 }

 .button.button-large,
 .button-group.button-large .button {
-	padding: 5px 12px;
+	height: 30px;
+    line-height: 28px;
+    padding: 0 12px 2px;
 }

 .button.button-small,
 .button-group.button-small .button {
-	padding: 2px 8px;
+	height: 21px;
+	line-height: 20px;
+	padding: 0 8px 1px;
 }

 .button:active {
--- a/wp-includes/functions.php
+++ b/wp-includes/functions.php
@ -2126,42 +2126,72 @@ function _default_wp_die_handler( $message, $title = '', $args = array() ) {
 		a:hover {
 			color: #D54E21;
 		}
-
 		.button {
-			font-family: sans-serif;
+			display: inline-block;
 			text-decoration: none;
-			font-size: 14px !important;
-			line-height: 16px;
-			padding: 6px 12px;
+			font-size: 14px; 
+			line-height: 23px;
+			height: 24px;
+			margin: 0;
+			padding: 0 10px 1px;
 			cursor: pointer;
-			border: 1px solid #bbb;
-			color: #464646;
-			-webkit-border-radius: 15px;
-			border-radius: 15px;
-			-moz-box-sizing: content-box;
-			-webkit-box-sizing: content-box;
-			box-sizing: content-box;
-			background-color: #f5f5f5;
-			background-image: -ms-linear-gradient(top, #ffffff, #f2f2f2);
-			background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
-			background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
-			background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f2f2f2));
-			background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
-			background-image: linear-gradient(top, #ffffff, #f2f2f2);
+			border-width: 1px;
+			border-style: solid;
+			-webkit-border-radius: 3px;
+			border-radius: 3px;
+			white-space: nowrap;
+			-webkit-box-sizing: border-box;
+			-moz-box-sizing:    border-box;
+			box-sizing:         border-box;
+			background: #f3f3f3;
+			background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#f4f4f4));
+			background-image: -webkit-linear-gradient(top, #fefefe, #f4f4f4);
+			background-image:    -moz-linear-gradient(top, #fefefe, #f4f4f4);
+			background-image:      -o-linear-gradient(top, #fefefe, #f4f4f4);
+			background-image:   linear-gradient(to bottom, #fefefe, #f4f4f4);
+			border-color: #bbb;
+		 	color: #333;
+			text-shadow: 0 1px 0 #fff;
+		}
+		
+		.button.button-large {
+			height: 29px;
+			line-height: 28px;
+			padding: 0 12px;
 		}

-		.button:hover {
-			color: #000;
-			border-color: #666;
+		.button:hover,
+		.button:focus {
+			background: #f3f3f3;
+			background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f3f3f3));
+			background-image: -webkit-linear-gradient(top, #fff, #f3f3f3);
+			background-image:    -moz-linear-gradient(top, #fff, #f3f3f3);
+			background-image:     -ms-linear-gradient(top, #fff, #f3f3f3);
+			background-image:      -o-linear-gradient(top, #fff, #f3f3f3);
+			background-image:   linear-gradient(to bottom, #fff, #f3f3f3);
+			border-color: #999;
+			color: #222;
+		}
+		
+		.button:focus  {
+			-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.2);
+			box-shadow: 1px 1px 1px rgba(0,0,0,.2);
 		}

 		.button:active {
-			background-image: -ms-linear-gradient(top, #f2f2f2, #ffffff);
-			background-image: -moz-linear-gradient(top, #f2f2f2, #ffffff);
-			background-image: -o-linear-gradient(top, #f2f2f2, #ffffff);
-			background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#ffffff));
-			background-image: -webkit-linear-gradient(top, #f2f2f2, #ffffff);
-			background-image: linear-gradient(top, #f2f2f2, #ffffff);
+			outline: none;
+			background: #eee;
+			background-image: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#fefefe));
+			background-image: -webkit-linear-gradient(top, #f4f4f4, #fefefe);
+			background-image:    -moz-linear-gradient(top, #f4f4f4, #fefefe);
+			background-image:     -ms-linear-gradient(top, #f4f4f4, #fefefe);
+			background-image:      -o-linear-gradient(top, #f4f4f4, #fefefe);
+			background-image:   linear-gradient(to bottom, #f4f4f4, #fefefe);
+			border-color: #999;
+			color: #333;
+			text-shadow: 0 -1px 0 #fff;
+			-webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
+		 	box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
 		}

 		<?php if ( 'rtl' == $text_direction ) : ?>
--- a/wp-load.php
+++ b/wp-load.php
@ -57,7 +57,7 @@ if ( file_exists( ABSPATH . 'wp-config.php') ) {
 	$die  = __( "There doesn't seem to be a <code>wp-config.php</code> file. I need this before we can get started." ) . '</p>';
 	$die .= '<p>' . __( "Need more help? <a href='http://codex.wordpress.org/Editing_wp-config.php'>We got it</a>." ) . '</p>';
 	$die .= '<p>' . __( "You can create a <code>wp-config.php</code> file through a web interface, but this doesn't work for all server setups. The safest way is to manually create the file." ) . '</p>';
-	$die .= '<p><a href="' . $path . '" class="button">' . __( "Create a Configuration File" ) . '</a>';
+	$die .= '<p><a href="' . $path . '" class="button button-large">' . __( "Create a Configuration File" ) . '</a>';

 	wp_die( $die, __( 'WordPress &rsaquo; Error' ) );
 }