Theme Customizer: Add a 'previewing' notice by the theme name. Reduce padding and size on section titles, add a border between section titles and content to better indicate the title as a click target. see #19910.

git-svn-id: http://svn.automattic.com/wordpress/trunk@20404 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
koopersmith 2012-04-08 21:17:46 +00:00
parent e25e2fb081
commit 5a8121fc8f
2 changed files with 38 additions and 6 deletions

View File

@ -30,10 +30,31 @@ body {
.customize-section-content {
display: none;
padding: 0 20px 15px;
padding: 10px 20px 15px;
overflow: hidden;
}
.control-section {
border: 0;
}
.control-section .customize-section-title {
padding: 8px 20px;
border-top: 1px solid #fff;
border-bottom: 1px solid #dfdfdf;
font-size: 13px;
}
.control-section .customize-section-title:hover {
background: -webkit-linear-gradient( top, #f5f5f5, #eee );
box-shadow: inset -11px 0 8px -8px rgba( 0, 0, 0, 0.1 );
}
.control-section .customize-section-content {
border-top: 1px solid #fff;
border-bottom: 1px solid #dfdfdf;
}
.customize-section.open .customize-section-content {
display: block;
}
@ -46,25 +67,36 @@ body {
border-style: solid;
border-width: 6px;
position: absolute;
top: 20px;
top: 25px;
right: 20px;
z-index: 1;
}
.customize-section.open .customize-section-title:after {
top: 13px;
margin-top: -7px;
border-color: transparent transparent #ccc transparent;
}
.control-section .customize-section-title:after {
top: 13px;
}
#customize-info {
margin-top: 45px;
}
#customize-info .preview-notice {
font-size: 13px;
line-height: 24px;
color: #999;
}
#customize-info .theme-name {
font-size: 16px;
font-weight: bold;
font-size: 20px;
font-weight: 200;
line-height: 24px;
display: block;
text-shadow: 0 1px 0 #fff;
}
#customize-info .theme-screenshot {

View File

@ -54,8 +54,8 @@ do_action( 'customize_controls_print_scripts' );
<div id="customize-info" class="customize-section">
<div class="customize-section-title">
<span class="preview-notice"><?php _e('You are previewing'); ?></span>
<strong class="theme-name"><?php echo $theme['Name']; ?></strong>
<span class="theme-by"><?php printf( __( 'By %s' ), $theme['Author'] ); ?></span>
</div>
<div class="customize-section-content">
<?php if ( $screenshot ) : ?>