<?php
/**
 * Twenty Twelve color annotations.
 */

/*
@todo
add the bg color to the ul.children li since the ul is wider
then add #fff transparency to the li a
*/

/**
 * Background and borders
 */
add_color_rule( 'bg', '#e6e6e6', array(
	array( 'body', 'background-color' ),
	array( '.menu-toggle, input[type="submit"], li.bypostauthor cite span', 'background-color', .1 ),

	// Use bg to colorize aside, link, and quote post formats.
	array( 'article.format-aside .aside', 'background-color', .1 ),
	array( 'article.format-aside .aside', 'border-color', .3 ),
	array( 'article.format-link header, article.format-quote .entry-content blockquote', 'background-color', .1 ),
) );

/**
 * Links
 */
add_color_rule( 'txt', '#21759b', array(
	array( 'a, li.bypostauthor cite span, .site-header h1 a', 'color', '#fff', 7 ),
	array( 'footer[role="contentinfo"] a, a.comment-reply-link', 'color', '#fff', 7 ),
	array( '.widget-area .widget a, .comments-link a, .entry-meta a, .template-home .widget-area .widget li a', 'color', '#fff', 9 ),
	array( '.main-navigation a, .main-navigation li a', 'color', '#fff', 9 ),

	// Form inputs
	array( '.menu-toggle, input[type="submit"], li.bypostauthor cite span', 'color', '#fff', 7 ),
), 'Links' );

/**
 * Link Hovers
 */
add_color_rule( 'link', '#0f3647', array(
	array( 'a:hover, .site-header h1 a:hover, .site-header h2 a:hover, .comments-area article header a:hover', 'color', '#fff', 4 ),
	array( '.widget-area .widget a:hover, .comments-link a:hover, .entry-meta a:hover, .template-home .widget-area .widget li a:hover, .main-navigation a:hover, .main-navigation li a:hover, footer[role="contentinfo"] a:hover, a.comment-reply-link:hover', 'color', '#fff', 4 ),

	// Form inputs
	array( '.menu-toggle:hover, .menu-toggle:focus, input[type="submit"]:hover', 'color', '#fff', 7 ),
	array( '.menu-toggle:active, .menu-toggle.toggled-on, input[type="submit"]:active, input[type="submit"].toggled-on', 'color', '#fff', 7 ),
), 'Link Hovers' );

/**
 * Color rules with the 'extra' cat are used to set a permanent color.
 * Useful for transparency effects on elements that need to blend with user's colors
 */

// Background color for main content area, reflects background color value with 90% white opacity overlay.
add_color_rule( 'extra', '#fff', array(
	array( '.site', 'background-color', .95 ),
	array( 'body.custom-background-empty', 'background-color', .95 ),
) );

// Colorize form inputs and buttons.
add_color_rule( 'extra', '#fff', array(
	array( 'body.custom-background-empty', 'background-color', .9 ),
	array( 'input[type="text"], input[type="password"], input[type="email"], input[type="url"], textarea', 'background-color', .4 ),
	array( 'input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="url"], textarea:focus', 'background-color', .9 ),
) );
add_color_rule( 'extra', '#d2d2d2', array(
	array( '.menu-toggle, input[type="submit"], li.bypostauthor cite span', 'border-color', .8 ),
) );
add_color_rule( 'extra', '#ccc', array(
	array( 'input[type="text"], input[type="password"], input[type="email"], input[type="url"], textarea', 'border-color', .4 ),
) );

// Stay at #444 please
add_color_rule( 'extra', '#444', array(
	array( '.comments-area article header cite a', 'color' ),
) );

// Make borders slightly blend with the toned content-background.
add_color_rule( 'extra', '#000', array(
	array( '.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul, .main-navigation li ul li a', 'border-color', .1 ),
	array( '#author-info', 'border-color', .1 ),
	array( 'footer[role="contentinfo"]', 'border-color', .1 ),
	array( 'article.sticky .featured-post', 'border-color', .1 ),
	array( 'pre, table, td, hr', 'border-color', .1 ),
	array( '.site-content article', 'border-color', .1 ),
	array( '.archive-header, .page-header', 'border-color', .1 ),
	array( '.template-home .widget-area', 'border-color', .1 ),
) );

// Add transparency to button and input styles.
add_theme_support( 'custom_colors_extra_css', 'twentytwelve_extra_css' );
function twentytwelve_extra_css() { ?>
.menu-toggle,
input[type="submit"],
li.bypostauthor cite span {
	background-color: rgba(225, 225, 225, .9);
	background-image: -moz-linear-gradient(top, rgba(244, 244, 244, .8), rgba(230, 230, 230, .8));
	background-image: -ms-linear-gradient(top, rgba(244, 244, 244, .8), rgba(230, 230, 230, .8));
	background-image: -webkit-linear-gradient(top, rgba(244, 244, 244, .8), rgba(230, 230, 230, .8));
	background-image: -o-linear-gradient(top, rgba(244, 244, 244, .8), rgba(230, 230, 230, .8));
	background-image: linear-gradient(top, rgba(244, 244, 244, .8), rgba(230, 230, 230, .8));
}
.menu-toggle:hover,
.menu-toggle:focus,
input[type="submit"]:hover {
	background-color: rgba(235, 235, 235, .9);
	background-image: -moz-linear-gradient(top, rgba(249, 249, 249, .8), rgba(235, 235, 235, .8));
	background-image: -ms-linear-gradient(top, rgba(249, 249, 249, .8), rgba(235, 235, 235, .8));
	background-image: -webkit-linear-gradient(top, rgba(249, 249, 249, .8), rgba(235, 235, 235, .8));
	background-image: -o-linear-gradient(top, rgba(249, 249, 249, .8), rgba(235, 235, 235, .8));
	background-image: linear-gradient(top, rgba(249, 249, 249, .8), rgba(235, 235, 235, .8));
}
.menu-toggle:active,
.menu-toggle.toggled-on,
input[type="submit"]:active,
input[type="submit"].toggled-on {
	background-color: rgba(225, 225, 225, .9);
	background-image: -moz-linear-gradient(top, rgba(235, 235, 235, .8), rgba(225, 225, 225, .8));
	background-image: -ms-linear-gradient(top, rgba(235, 235, 235, .8), rgba(225, 225, 225, .8));
	background-image: -webkit-linear-gradient(top, rgba(235, 235, 235, .8), rgba(225, 225, 225, .8));
	background-image: -o-linear-gradient(top, rgba(235, 235, 235, .8), rgba(225, 225, 225, .8));
	background-image: linear-gradient(top, rgba(235, 235, 235, .8), rgba(225, 225, 225, .8));
}
<?php
}