themes-wordpress/lodestar/inc/wpcom-colors.php
2018-02-27 14:13:58 +11:00

478 lines
13 KiB
PHP

<?php
/* Custom Colors: Lodestar */
add_color_rule( 'bg', '#ffffff', array(
array( 'body,
.one-column .panel-content .wrap,
.jetpack-social-navigation', 'background-color' ),
array( '.site-footer .widget-area', 'background-color', '-0.5' ),
// Colour; this background already contrasts against bg
array( '.site-footer .jetpack-social-navigation a', 'color' ),
// WooCommerce
array( '.single-product div.product .woocommerce-tabs ul.tabs li.active', 'border-bottom-color' ),
),
__( 'Background' ) );
add_color_rule( 'txt', '#333333', array(
// Color - Constrast against bg
array( 'body,
a:hover,
a:focus,
a:active,
.entry-title a,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.project-terms a.current-type,
.panel-content .entry-title,
.entry-meta,
.lodestar-intro .entry-content,
.lodestar-panel .jetpack-testimonial .entry-header h2,
.widget-area .widget.woocommerce ul.product_list_widget li > a.remove,
table.cart .product-remove a', 'color', 'bg', 12 ),
array( 'input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea', 'color', '#fff' ),
array( 'input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus', 'color', '#fff' ),
array( '.site-header,
.header-top,
.main-navigation ul ul ul,
.main-navigation ul ul ul ul ul,
.main-navigation ul ul ul ul ul ul ul,
.main-navigation ul ul ul ul ul ul ul ul ul,
.main-navigation ul ul ul ul ul ul ul ul ul ul ul,
.main-navigation ul ul a:hover,
.main-navigation ul ul a:focus,
.main-navigation ul ul li:hover,
.main-navigation ul ul li:focus,
.main-navigation ul ul ul ul a:hover,
.main-navigation ul ul ul ul a:focus,
.main-navigation ul ul ul ul li:hover,
.main-navigation ul ul ul ul li:focus,
.main-navigation ul ul ul ul ul ul a:hover,
.main-navigation ul ul ul ul ul ul a:focus,
.main-navigation ul ul ul ul ul ul li:hover,
.main-navigation ul ul ul ul ul ul li:focus,
.main-navigation ul ul ul ul ul ul ul ul a:hover,
.main-navigation ul ul ul ul ul ul ul ul a:focus,
.main-navigation ul ul ul ul ul ul ul ul li:hover,
.main-navigation ul ul ul ul ul ul ul ul li:focus,
.main-navigation ul ul ul ul ul ul ul ul ul ul a:hover,
.main-navigation ul ul ul ul ul ul ul ul ul ul a:focus,
.main-navigation ul ul ul ul ul ul ul ul ul ul li:hover,
.main-navigation ul ul ul ul ul ul ul ul ul ul li:focus,
.site-info,
button,
button:hover,
button:focus,
input[type="button"],
input[type="button"]:hover,
input[type="button"]:focus,
input[type="reset"],
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="submit"],
input[type="submit"]:hover,
input[type="submit"]:focus,
#infinite-handle span button,
#infinite-handle span button:hover,
#infinite-handle span button:focus', 'background-color' ),
// Background - contrast against bg
array( '.main-navigation li:hover,
.main-navigation li:focus,
.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation ul ul,
.main-navigation ul ul ul ul,
.main-navigation ul ul ul ul ul ul,
.main-navigation ul ul ul ul ul ul ul ul,
.main-navigation ul ul ul ul ul ul ul ul ul ul,
.main-navigation ul ul ul a:hover,
.main-navigation ul ul ul a:focus,
.main-navigation ul ul ul li:hover,
.main-navigation ul ul ul li:focus,
.main-navigation ul ul ul ul ul a:hover,
.main-navigation ul ul ul ul ul a:focus,
.main-navigation ul ul ul ul ul li:hover,
.main-navigation ul ul ul ul ul li:focus,
.main-navigation ul ul ul ul ul ul ul a:hover,
.main-navigation ul ul ul ul ul ul ul a:focus,
.main-navigation ul ul ul ul ul ul ul li:hover,
.main-navigation ul ul ul ul ul ul ul li:focus,
.main-navigation ul ul ul ul ul ul ul ul ul a:hover,
.main-navigation ul ul ul ul ul ul ul ul ul a:focus,
.main-navigation ul ul ul ul ul ul ul ul ul li:hover,
.main-navigation ul ul ul ul ul ul ul ul ul li:focus,
.main-navigation ul ul ul ul ul ul ul ul ul ul ul a:hover,
.main-navigation ul ul ul ul ul ul ul ul ul ul ul a:focus,
.main-navigation ul ul ul ul ul ul ul ul ul ul ul li:hover,
.main-navigation ul ul ul ul ul ul ul ul ul ul ul li:focus,
.main-navigation ul,
.main-navigation ul li.current_page_item > a,
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current_page_ancestor > a', 'background-color', 'txt', 1.5 ),
// WooCommerce
array( '.star-rating span:before,
span.price,
p.price,
span.price ins,
p.price ins,
.widget_layered_nav_filters ul li a:before', 'color', 'bg' ),
array( '.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-page .button,
.woocommerce-page .button:visited,
.woocommerce-page .hover,
.woocommerce-page .button:hover,
.site-header-cart .widget_shopping_cart .woocommerce-mini-cart__buttons .button,
.site-header-cart .widget_shopping_cart .woocommerce-mini-cart__buttons .button:hover,
.site-header-cart .button,
.site-header-cart .button:visited', 'background-color' ),
array( '.site-header-cart .widget_shopping_cart', 'background-color', 'txt', 1.5 ),
array( '.onsale,
table.cart .product-remove a:hover,
.woocommerce-message:before,
.woocommerce-info:before,
.woocommerce-error:before,
.woocommerce-noreviews:before,
p.no-comments:before,
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:before', 'background-color', 'bg', 1.5 ),
array( '.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments', 'border-color', 'bg' ),
),
__( 'Text' ) );
add_color_rule( 'link', '#999999', array(
// Color - contrast against bg
array( 'a,
a:visited,
.entry-title a:hover,
.entry-title a:focus', 'color', 'bg' ),
array( 'button,
button:hover,
button:focus,
input[type="button"],
input[type="button"]:hover,
input[type="button"]:focus,
input[type="reset"],
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="submit"],
input[type="submit"]:hover,
input[type="submit"]:focus,
#infinite-handle span button,
#infinite-handle span button:hover,
#infinite-handle span button:focus', 'color', 'txt' ),
// Background - contrast against bg
array( '.site-footer .jetpack-social-navigation a,
.site-footer .jetpack-social-navigation a:hover,
.site-footer .jetpack-social-navigation a:focus',
'background-color', 'bg' ),
// WooCommerce
array( '.widget_price_filter .ui-slider .ui-slider-range,
.widget_price_filter .ui-slider .ui-slider-handle', 'background-color', 'bg' ),
array( '.woocommerce-page .button,
.site-header-cart .widget_shopping_cart .woocommerce-mini-cart__buttons .button,
.site-header-cart .widget_shopping_cart .woocommerce-mini-cart__buttons .button:hover', 'color', 'txt' ),
),
__( 'Link' ) );
/* Extra Colour Rules */
add_color_rule( 'extra', '#ffffff', array(
// Color - contrast against bg
array( '.site-footer .widget-area', 'color', 'bg' ),
array( 'input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus,
.post-navigation .nav-links,
.entry-author', 'border-color', 'bg', 4 ),
// Color - contrast against txt
array( '.header-top,
.header-top a,
.header-top a:visited,
.header-top a:hover,
.header-top a:focus,
.site-top-content span.site-top-content-2,
.menu-toggle,
.menu-toggle:hover,
.menu-toggle:focus,
.site-info,
.site-info a,
.site-info:visited', 'color', 'txt', 14 ),
// Border - contrast against txt
array( '.menu-toggle,
.menu-toggle:hover,
.menu-toggle:focus', 'border-color', 'txt' ),
// Woocommerce
array( '.woocommerce-message:before,
.woocommerce-info:before,
.woocommerce-error:before,
.woocommerce-noreviews:before,
p.no-comments:before', 'color', 'txt' ),
array( '.site-header-cart .cart-contents .count', 'color', 'txt', 14 ),
array( '.onsale', 'color', 'txt' ),
) );
add_color_rule( 'extra', '#bbbbbb', array(
// Border - low contrast against bg
array( 'input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea,
select', 'border-color', 'bg', 5 ),
// Background - low contrast against bg
array( 'hr', 'background-color', 'bg', 3 ),
// Border - contrast against bg
array( 'td,
th,
blockquote,
.lodestar-front-page article:not(.has-post-thumbnail),
.jetpack-testimonial .entry-content,
.widget ul li,
.widget_product_categories ul li li,
.single-product div.product .woocommerce-tabs .woocommerce-Tabs-panel,
.single-product div.product .woocommerce-tabs ul.tabs li,
.widget .tagcloud a:hover,
.widget .tagcloud a:focus,
.widget.widget_tag_cloud a:hover,
.widget.widget_tag_cloud a:focus,
.wp_widget_tag_cloud a:hover,
.wp_widget_tag_cloud a:focus,
.jetpack-social-navigation,
.woocommerce-checkout-payment ul.payment_methods,
.woocommerce-checkout-payment .form-row', 'border-color', 'bg', 1.5 ),
) );
add_color_rule( 'extra', '#555555', array(
// Colour - contrast against bg
array( '.entry-content div.sharedaddy h3,
.entry-content div.sharedaddy h3.sd-title,
.entry-content div#jp-relatedposts h3.jp-relatedposts-headline', 'color', 'bg' ),
) );
add_color_rule( 'extra', '#111111', array(
// Background
array( '.main-navigation ul', 'background' ),
) );
/* Extra CSS */
function lodestar_extra_css() { ?>
body .header-top a:hover,
body .header-top a:focus,
.menu-toggle:hover,
.menu-toggle:focus,
.site-top-content-2,
.site-footer .jetpack-social-navigation a:hover,
.site-footer .jetpack-social-navigation a:focus {
opacity: 0.8;
}
body .header-top #site-navigation a:hover,
body .header-top #site-navigation a:focus {
opacity: 1.0;
}
body .site-branding,
body .site-branding a {
color: #fff;
}
body .site-description,
body .site-description a {
color: #ccc;
}
pre,
mark,
ins {
background: rgba(0,0,0,0.15);
}
.entry-content h1,
.entry-content h2,
.panel-content .entry-title,
.entry-meta {
opacity: 0.6;
}
.lodestar-intro .entry-content {
opacity: 0.7;
}
.entry-content h5,
.entry-content h6 {
opacity: 0.8;
}
button:hover,
button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
#infinite-handle span button:hover,
#infinite-handle span button:focus,
.woocommerce-page .button:hover,
.woocommerce-page .button:focus,
.site-header-cart .button:hover,
.site-header-cart .button:focus {
opacity: 0.8;
}
table.shop_table {
border: none;
}
table.shop_table th,
.woocommerce-checkout-payment .payment_box {
background: rgba(0,0,0,0.15);
}
@media only screen and ( max-width: 59.9999em ) {
.main-navigation li:hover,
.main-navigation li:focus,
.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation ul ul {
background: transparent !important;
}
}
@media only screen and ( min-width: 60em ) {
.main-navigation ul,
#top-menu {
background-color: transparent;
}
}
<?php
}
add_theme_support( 'custom_colors_extra_css', 'lodestar_extra_css' );
add_color_palette( array(
'#333333',
'#111111',
'#a7c5bd',
), __( 'Grey and Green' ) );
add_color_palette( array(
'#39425a',
'#525a74',
'#b8c6df'
), __( 'Blue') );
add_color_palette( array(
'#f1f1f1',
'#4c4c4c',
'#e95870'
), __( 'Light Grey and Pink') );
add_color_palette( array(
'#ffffff',
'#766862',
'#1e9acc'
), __( 'White, Brown, and Blue' ) );
add_color_palette( array(
'#ebe8df',
'#367690',
'#db623d'
), __( 'Beige, Blue, and Orange' ) );
add_color_palette( array(
'#ffffff',
'#a92727',
'#474843'
), __( 'White, Red, and Grey' ) );