Theme Customizer: Color picker markup/CSS improvements. Part 1. see #19910.

git-svn-id: http://svn.automattic.com/wordpress/trunk@20130 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/class-wp-customize-setting.php

@@ -347,10 +347,14 @@ class WP_Customize_Setting {
 						<a href="#"></a>
 						<div class="color-picker-controls">
 							<div class="farbtastic-placeholder"></div>
+							<div class="color-picker-details">
+								<div class="color-picker-hex">
 									<span>#</span>
 									<input type="text" />
 								</div>
 							</div>
+						</div>
+					</div>
 				</label>
 				<?php
 				break;

wp-includes/css/customize-controls.dev.css

@@ -248,22 +248,45 @@ body {
 .customize-section .color-picker .color-picker-controls {
 	display: none;
 }
-.customize-section .color-picker span {
+
+
+.customize-section .color-picker .farbtastic-placeholder {
+	height: 195px;
+	width: 195px;
+	border: 4px solid #fff;
+	box-shadow: 0 0 20px rgba( 0, 0, 0, 0.2 );
+
+	-webkit-border-radius: 50%;
+	border-radius: 50%;
+}
+
+
+.customize-section .color-picker-hex {
+	background-color: #fff;
+	border: 1px solid #dfdfdf;
+	-webkit-border-radius: 3px;
+	border-radius: 3px;
+	color: #777;
+	width: 70px;
+	font-family: monospace;
+}
+
+.customize-section .color-picker-hex span {
 	float: left;
 	display: block;
 	margin: 1px -2px 0 0;
 	line-height: 15px;
-	padding: 3px 5px;
-	color: #777;
-	text-align: center;
-	background-color: #fff;
-	border: 1px solid #dfdfdf;
+	padding: 3px 0 3px 8px;
+	text-align: right;
 	-webkit-border-radius: 3px 0 0 3px;
 	border-radius: 3px 0 0 3px;
 }
 
-.customize-section .color-picker input[type="text"] {
+.customize-section .color-picker-hex input[type="text"] {
+	color: #777;
 	-webkit-border-radius: 0 3px 3px 0;
 	border-radius: 0 3px 3px 0;
-	width: 150px;
+	width: 50px;
+	border: 0;
+	background: transparent;
 }