Style and positioning fixes to form elements in the Publish box:

- Make select element text #555 to match others
- Make Cancel links vertically align with buttons
- Make sure the spacing between buttons and cancel links is always consistent
- Override active button styles for responsive states so button size doesn't change when active
- Reduce font size of date select element to match date text inputs

Fixes #26082, props aubreypwd.


Built from https://develop.svn.wordpress.org/trunk@26247


git-svn-id: http://core.svn.wordpress.org/trunk@26153 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/wp-admin-rtl.css

@@ -1087,6 +1087,13 @@ p.install-help {
 	padding: 2px;
 	line-height: 28px;
 	height: 28px;
+	color: #555;
+	vertical-align: top;
+}
+
+.wp-admin .button-cancel {
+	padding: 0 5px;
+	line-height: 2;
 }
 
 .meta-box-sortables select {
@@ -4099,7 +4106,6 @@ input#link_url {
 }
 
 #post-status-select {
-	line-height: 2.5em;
 	margin-top: 3px;
 }
 
@@ -4313,10 +4319,11 @@ td.plugin-title p {
 }
 
 #timestampdiv select {
-	height: 20px;
+	height: 21px;
 	line-height: 14px;
 	padding: 0;
 	vertical-align: top;
+	font-size: 12px;
 }
 
 #aa, #jj, #hh, #mn {
@@ -11093,8 +11100,14 @@ li#wp-admin-bar-toggle-button {
 		height: 36px;
 		font-size: 16px;
 	}
+	
+	.wp-admin .button-cancel {
+		padding: 0;
+		font-size: 14px;
+	}
 
 	.wp-core-ui .button,
+	.wp-core-ui .button:active, /* Override non-responsive active styles in buttons.css */
 	input#publish,
 	input#save-post,
 	a.preview {
@@ -11368,9 +11381,8 @@ li#wp-admin-bar-toggle-button {
 	}
 
 	.wp-core-ui .save-post-status.button {
-		top: 16px;
 		position: relative;
-		margin: 0 10px;
+		margin: 0 10px 0 14px; /* 14px right margin to match all other buttons */
 	}
 
 	.wp-core-ui .save-post-visibility,

wp-admin/css/wp-admin.css

@@ -1087,6 +1087,13 @@ p.install-help {
 	padding: 2px;
 	line-height: 28px;
 	height: 28px;
+	color: #555;
+	vertical-align: top;
+}
+
+.wp-admin .button-cancel {
+	padding: 0 5px;
+	line-height: 2;
 }
 
 .meta-box-sortables select {
@@ -4099,7 +4106,6 @@ input#link_url {
 }
 
 #post-status-select {
-	line-height: 2.5em;
 	margin-top: 3px;
 }
 
@@ -4313,10 +4319,11 @@ td.plugin-title p {
 }
 
 #timestampdiv select {
-	height: 20px;
+	height: 21px;
 	line-height: 14px;
 	padding: 0;
 	vertical-align: top;
+	font-size: 12px;
 }
 
 #aa, #jj, #hh, #mn {
@@ -11093,8 +11100,14 @@ li#wp-admin-bar-toggle-button {
 		height: 36px;
 		font-size: 16px;
 	}
+	
+	.wp-admin .button-cancel {
+		padding: 0;
+		font-size: 14px;
+	}
 
 	.wp-core-ui .button,
+	.wp-core-ui .button:active, /* Override non-responsive active styles in buttons.css */
 	input#publish,
 	input#save-post,
 	a.preview {
@@ -11368,9 +11381,8 @@ li#wp-admin-bar-toggle-button {
 	}
 
 	.wp-core-ui .save-post-status.button {
-		top: 16px;
 		position: relative;
-		margin: 0 10px;
+		margin: 0 14px 0 10px; /* 14px right margin to match all other buttons */
 	}
 
 	.wp-core-ui .save-post-visibility,

wp-admin/includes/meta-boxes.php

@@ -99,7 +99,7 @@ switch ( $post->post_status ) {
 <?php endif; ?>
 </select>
  <a href="#post_status" class="save-post-status hide-if-no-js button"><?php _e('OK'); ?></a>
- <a href="#post_status" class="cancel-post-status hide-if-no-js"><?php _e('Cancel'); ?></a>
+ <a href="#post_status" class="cancel-post-status hide-if-no-js button-cancel"><?php _e('Cancel'); ?></a>
 </div>
 
 <?php } ?>
@@ -143,7 +143,7 @@ echo esc_html( $visibility_trans ); ?></span>
 
 <p>
  <a href="#visibility" class="save-post-visibility hide-if-no-js button"><?php _e('OK'); ?></a>
- <a href="#visibility" class="cancel-post-visibility hide-if-no-js"><?php _e('Cancel'); ?></a>
+ <a href="#visibility" class="cancel-post-visibility hide-if-no-js button-cancel"><?php _e('Cancel'); ?></a>
 </p>
 </div>
 <?php } ?>

wp-admin/includes/template.php

@@ -686,7 +686,7 @@ function touch_time( $edit = 1, $for_post = 1, $tab_index = 0, $multi = 0 ) {
 
 <p>
 <a href="#edit_timestamp" class="save-timestamp hide-if-no-js button"><?php _e('OK'); ?></a>
-<a href="#edit_timestamp" class="cancel-timestamp hide-if-no-js"><?php _e('Cancel'); ?></a>
+<a href="#edit_timestamp" class="cancel-timestamp hide-if-no-js button-cancel"><?php _e('Cancel'); ?></a>
 </p>
 <?php
 }