wp-content/themes/twentyfifteen/inc/customizer.php

   1 <?php
   2 /**
   3  * Twenty Fifteen Customizer functionality
   4  *
   5  * @package WordPress
   6  * @subpackage Twenty_Fifteen
   7  * @since Twenty Fifteen 1.0
   8  */
   9
  10 /**
  11  * Add postMessage support for site title and description for the Customizer.
  12  *
  13  * @since Twenty Fifteen 1.0
  14  *
  15  * @param WP_Customize_Manager $wp_customize Customizer object.
  16  */
  17 function twentyfifteen_customize_register( $wp_customize ) {
  18         $color_scheme = twentyfifteen_get_color_scheme();
  19
  20         $wp_customize->get_setting( 'blogname' )->transport        = 'postMessage';
  21         $wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';
  22
  23         // Add color scheme setting and control.
  24         $wp_customize->add_setting( 'color_scheme', array(
  25                 'default'           => 'default',
  26                 'sanitize_callback' => 'twentyfifteen_sanitize_color_scheme',
  27                 'transport'         => 'postMessage',
  28         ) );
  29
  30         $wp_customize->add_control( 'color_scheme', array(
  31                 'label'    => __( 'Base Color Scheme', 'twentyfifteen' ),
  32                 'section'  => 'colors',
  33                 'type'     => 'select',
  34                 'choices'  => twentyfifteen_get_color_scheme_choices(),
  35                 'priority' => 1,
  36         ) );
  37
  38         // Add custom header and sidebar text color setting and control.
  39         $wp_customize->add_setting( 'sidebar_textcolor', array(
  40                 'default'           => $color_scheme[4],
  41                 'sanitize_callback' => 'sanitize_hex_color',
  42                 'transport'         => 'postMessage',
  43         ) );
  44
  45         $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'sidebar_textcolor', array(
  46                 'label'       => __( 'Header and Sidebar Text Color', 'twentyfifteen' ),
  47                 'description' => __( 'Applied to the header on small screens and the sidebar on wide screens.', 'twentyfifteen' ),
  48                 'section'     => 'colors',
  49         ) ) );
  50
  51         // Remove the core header textcolor control, as it shares the sidebar text color.
  52         $wp_customize->remove_control( 'header_textcolor' );
  53
  54         // Add custom header and sidebar background color setting and control.
  55         $wp_customize->add_setting( 'header_background_color', array(
  56                 'default'           => $color_scheme[1],
  57                 'sanitize_callback' => 'sanitize_hex_color',
  58                 'transport'         => 'postMessage',
  59         ) );
  60
  61         $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_background_color', array(
  62                 'label'       => __( 'Header and Sidebar Background Color', 'twentyfifteen' ),
  63                 'description' => __( 'Applied to the header on small screens and the sidebar on wide screens.', 'twentyfifteen' ),
  64                 'section'     => 'colors',
  65         ) ) );
  66
  67         // Add an additional description to the header image section.
  68         $wp_customize->get_section( 'header_image' )->description = __( 'Applied to the header on small screens and the sidebar on wide screens.', 'twentyfifteen' );
  69 }
  70 add_action( 'customize_register', 'twentyfifteen_customize_register', 11 );
  71
  72 /**
  73  * Register color schemes for Twenty Fifteen.
  74  *
  75  * Can be filtered with {@see 'twentyfifteen_color_schemes'}.
  76  *
  77  * The order of colors in a colors array:
  78  * 1. Main Background Color.
  79  * 2. Sidebar Background Color.
  80  * 3. Box Background Color.
  81  * 4. Main Text and Link Color.
  82  * 5. Sidebar Text and Link Color.
  83  * 6. Meta Box Background Color.
  84  *
  85  * @since Twenty Fifteen 1.0
  86  *
  87  * @return array An associative array of color scheme options.
  88  */
  89 function twentyfifteen_get_color_schemes() {
  90         /**
  91          * Filter the color schemes registered for use with Twenty Fifteen.
  92          *
  93          * The default schemes include 'default', 'dark', 'yellow', 'pink', 'purple', and 'blue'.
  94          *
  95          * @since Twenty Fifteen 1.0
  96          *
  97          * @param array $schemes {
  98          *     Associative array of color schemes data.
  99          *
 100          *     @type array $slug {
 101          *         Associative array of information for setting up the color scheme.
 102          *
 103          *         @type string $label  Color scheme label.
 104          *         @type array  $colors HEX codes for default colors prepended with a hash symbol ('#').
 105          *                              Colors are defined in the following order: Main background, sidebar
 106          *                              background, box background, main text and link, sidebar text and link,
 107          *                              meta box background.
 108          *     }
 109          * }
 110          */
 111         return apply_filters( 'twentyfifteen_color_schemes', array(
 112                 'default' => array(
 113                         'label'  => __( 'Default', 'twentyfifteen' ),
 114                         'colors' => array(
 115                                 '#f1f1f1',
 116                                 '#ffffff',
 117                                 '#ffffff',
 118                                 '#333333',
 119                                 '#333333',
 120                                 '#f7f7f7',
 121                         ),
 122                 ),
 123                 'dark'    => array(
 124                         'label'  => __( 'Dark', 'twentyfifteen' ),
 125                         'colors' => array(
 126                                 '#111111',
 127                                 '#202020',
 128                                 '#202020',
 129                                 '#bebebe',
 130                                 '#bebebe',
 131                                 '#1b1b1b',
 132                         ),
 133                 ),
 134                 'yellow'  => array(
 135                         'label'  => __( 'Yellow', 'twentyfifteen' ),
 136                         'colors' => array(
 137                                 '#f4ca16',
 138                                 '#ffdf00',
 139                                 '#ffffff',
 140                                 '#111111',
 141                                 '#111111',
 142                                 '#f1f1f1',
 143                         ),
 144                 ),
 145                 'pink'    => array(
 146                         'label'  => __( 'Pink', 'twentyfifteen' ),
 147                         'colors' => array(
 148                                 '#ffe5d1',
 149                                 '#e53b51',
 150                                 '#ffffff',
 151                                 '#352712',
 152                                 '#ffffff',
 153                                 '#f1f1f1',
 154                         ),
 155                 ),
 156                 'purple'  => array(
 157                         'label'  => __( 'Purple', 'twentyfifteen' ),
 158                         'colors' => array(
 159                                 '#674970',
 160                                 '#2e2256',
 161                                 '#ffffff',
 162                                 '#2e2256',
 163                                 '#ffffff',
 164                                 '#f1f1f1',
 165                         ),
 166                 ),
 167                 'blue'   => array(
 168                         'label'  => __( 'Blue', 'twentyfifteen' ),
 169                         'colors' => array(
 170                                 '#e9f2f9',
 171                                 '#55c3dc',
 172                                 '#ffffff',
 173                                 '#22313f',
 174                                 '#ffffff',
 175                                 '#f1f1f1',
 176                         ),
 177                 ),
 178         ) );
 179 }
 180
 181 if ( ! function_exists( 'twentyfifteen_get_color_scheme' ) ) :
 182 /**
 183  * Get the current Twenty Fifteen color scheme.
 184  *
 185  * @since Twenty Fifteen 1.0
 186  *
 187  * @return array An associative array of either the current or default color scheme hex values.
 188  */
 189 function twentyfifteen_get_color_scheme() {
 190         $color_scheme_option = get_theme_mod( 'color_scheme', 'default' );
 191         $color_schemes       = twentyfifteen_get_color_schemes();
 192
 193         if ( array_key_exists( $color_scheme_option, $color_schemes ) ) {
 194                 return $color_schemes[ $color_scheme_option ]['colors'];
 195         }
 196
 197         return $color_schemes['default']['colors'];
 198 }
 199 endif; // twentyfifteen_get_color_scheme
 200
 201 if ( ! function_exists( 'twentyfifteen_get_color_scheme_choices' ) ) :
 202 /**
 203  * Returns an array of color scheme choices registered for Twenty Fifteen.
 204  *
 205  * @since Twenty Fifteen 1.0
 206  *
 207  * @return array Array of color schemes.
 208  */
 209 function twentyfifteen_get_color_scheme_choices() {
 210         $color_schemes                = twentyfifteen_get_color_schemes();
 211         $color_scheme_control_options = array();
 212
 213         foreach ( $color_schemes as $color_scheme => $value ) {
 214                 $color_scheme_control_options[ $color_scheme ] = $value['label'];
 215         }
 216
 217         return $color_scheme_control_options;
 218 }
 219 endif; // twentyfifteen_get_color_scheme_choices
 220
 221 if ( ! function_exists( 'twentyfifteen_sanitize_color_scheme' ) ) :
 222 /**
 223  * Sanitization callback for color schemes.
 224  *
 225  * @since Twenty Fifteen 1.0
 226  *
 227  * @param string $value Color scheme name value.
 228  * @return string Color scheme name.
 229  */
 230 function twentyfifteen_sanitize_color_scheme( $value ) {
 231         $color_schemes = twentyfifteen_get_color_scheme_choices();
 232
 233         if ( ! array_key_exists( $value, $color_schemes ) ) {
 234                 $value = 'default';
 235         }
 236
 237         return $value;
 238 }
 239 endif; // twentyfifteen_sanitize_color_scheme
 240
 241 /**
 242  * Enqueues front-end CSS for color scheme.
 243  *
 244  * @since Twenty Fifteen 1.0
 245  *
 246  * @see wp_add_inline_style()
 247  */
 248 function twentyfifteen_color_scheme_css() {
 249         $color_scheme_option = get_theme_mod( 'color_scheme', 'default' );
 250
 251         // Don't do anything if the default color scheme is selected.
 252         if ( 'default' === $color_scheme_option ) {
 253                 return;
 254         }
 255
 256         $color_scheme = twentyfifteen_get_color_scheme();
 257
 258         // Convert main and sidebar text hex color to rgba.
 259         $color_textcolor_rgb         = twentyfifteen_hex2rgb( $color_scheme[3] );
 260         $color_sidebar_textcolor_rgb = twentyfifteen_hex2rgb( $color_scheme[4] );
 261         $colors = array(
 262                 'background_color'            => $color_scheme[0],
 263                 'header_background_color'     => $color_scheme[1],
 264                 'box_background_color'        => $color_scheme[2],
 265                 'textcolor'                   => $color_scheme[3],
 266                 'secondary_textcolor'         => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.7)', $color_textcolor_rgb ),
 267                 'border_color'                => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $color_textcolor_rgb ),
 268                 'border_focus_color'          => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $color_textcolor_rgb ),
 269                 'sidebar_textcolor'           => $color_scheme[4],
 270                 'sidebar_border_color'        => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $color_sidebar_textcolor_rgb ),
 271                 'sidebar_border_focus_color'  => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $color_sidebar_textcolor_rgb ),
 272                 'secondary_sidebar_textcolor' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.7)', $color_sidebar_textcolor_rgb ),
 273                 'meta_box_background_color'   => $color_scheme[5],
 274         );
 275
 276         $color_scheme_css = twentyfifteen_get_color_scheme_css( $colors );
 277
 278         wp_add_inline_style( 'twentyfifteen-style', $color_scheme_css );
 279 }
 280 add_action( 'wp_enqueue_scripts', 'twentyfifteen_color_scheme_css' );
 281
 282 /**
 283  * Binds JS listener to make Customizer color_scheme control.
 284  *
 285  * Passes color scheme data as colorScheme global.
 286  *
 287  * @since Twenty Fifteen 1.0
 288  */
 289 function twentyfifteen_customize_control_js() {
 290         wp_enqueue_script( 'color-scheme-control', get_template_directory_uri() . '/js/color-scheme-control.js', array( 'customize-controls', 'iris', 'underscore', 'wp-util' ), '20141216', true );
 291         wp_localize_script( 'color-scheme-control', 'colorScheme', twentyfifteen_get_color_schemes() );
 292 }
 293 add_action( 'customize_controls_enqueue_scripts', 'twentyfifteen_customize_control_js' );
 294
 295 /**
 296  * Binds JS handlers to make the Customizer preview reload changes asynchronously.
 297  *
 298  * @since Twenty Fifteen 1.0
 299  */
 300 function twentyfifteen_customize_preview_js() {
 301         wp_enqueue_script( 'twentyfifteen-customize-preview', get_template_directory_uri() . '/js/customize-preview.js', array( 'customize-preview' ), '20141216', true );
 302 }
 303 add_action( 'customize_preview_init', 'twentyfifteen_customize_preview_js' );
 304
 305 /**
 306  * Returns CSS for the color schemes.
 307  *
 308  * @since Twenty Fifteen 1.0
 309  *
 310  * @param array $colors Color scheme colors.
 311  * @return string Color scheme CSS.
 312  */
 313 function twentyfifteen_get_color_scheme_css( $colors ) {
 314         $colors = wp_parse_args( $colors, array(
 315                 'background_color'            => '',
 316                 'header_background_color'     => '',
 317                 'box_background_color'        => '',
 318                 'textcolor'                   => '',
 319                 'secondary_textcolor'         => '',
 320                 'border_color'                => '',
 321                 'border_focus_color'          => '',
 322                 'sidebar_textcolor'           => '',
 323                 'sidebar_border_color'        => '',
 324                 'sidebar_border_focus_color'  => '',
 325                 'secondary_sidebar_textcolor' => '',
 326                 'meta_box_background_color'   => '',
 327         ) );
 328
 329         $css = <<<CSS
 330         /* Color Scheme */
 331
 332         /* Background Color */
 333         body {
 334                 background-color: {$colors['background_color']};
 335         }
 336
 337         /* Sidebar Background Color */
 338         body:before,
 339         .site-header {
 340                 background-color: {$colors['header_background_color']};
 341         }
 342
 343         /* Box Background Color */
 344         .post-navigation,
 345         .pagination,
 346         .secondary,
 347         .site-footer,
 348         .hentry,
 349         .page-header,
 350         .page-content,
 351         .comments-area,
 352         .widecolumn {
 353                 background-color: {$colors['box_background_color']};
 354         }
 355
 356         /* Box Background Color */
 357         button,
 358         input[type="button"],
 359         input[type="reset"],
 360         input[type="submit"],
 361         .pagination .prev,
 362         .pagination .next,
 363         .widget_calendar tbody a,
 364         .widget_calendar tbody a:hover,
 365         .widget_calendar tbody a:focus,
 366         .page-links a,
 367         .page-links a:hover,
 368         .page-links a:focus,
 369         .sticky-post {
 370                 color: {$colors['box_background_color']};
 371         }
 372
 373         /* Main Text Color */
 374         button,
 375         input[type="button"],
 376         input[type="reset"],
 377         input[type="submit"],
 378         .pagination .prev,
 379         .pagination .next,
 380         .widget_calendar tbody a,
 381         .page-links a,
 382         .sticky-post {
 383                 background-color: {$colors['textcolor']};
 384         }
 385
 386         /* Main Text Color */
 387         body,
 388         blockquote cite,
 389         blockquote small,
 390         a,
 391         .dropdown-toggle:after,
 392         .image-navigation a:hover,
 393         .image-navigation a:focus,
 394         .comment-navigation a:hover,
 395         .comment-navigation a:focus,
 396         .widget-title,
 397         .entry-footer a:hover,
 398         .entry-footer a:focus,
 399         .comment-metadata a:hover,
 400         .comment-metadata a:focus,
 401         .pingback .edit-link a:hover,
 402         .pingback .edit-link a:focus,
 403         .comment-list .reply a:hover,
 404         .comment-list .reply a:focus,
 405         .site-info a:hover,
 406         .site-info a:focus {
 407                 color: {$colors['textcolor']};
 408         }
 409
 410         /* Main Text Color */
 411         .entry-content a,
 412         .entry-summary a,
 413         .page-content a,
 414         .comment-content a,
 415         .pingback .comment-body > a,
 416         .author-description a,
 417         .taxonomy-description a,
 418         .textwidget a,
 419         .entry-footer a:hover,
 420         .comment-metadata a:hover,
 421         .pingback .edit-link a:hover,
 422         .comment-list .reply a:hover,
 423         .site-info a:hover {
 424                 border-color: {$colors['textcolor']};
 425         }
 426
 427         /* Secondary Text Color */
 428         button:hover,
 429         button:focus,
 430         input[type="button"]:hover,
 431         input[type="button"]:focus,
 432         input[type="reset"]:hover,
 433         input[type="reset"]:focus,
 434         input[type="submit"]:hover,
 435         input[type="submit"]:focus,
 436         .pagination .prev:hover,
 437         .pagination .prev:focus,
 438         .pagination .next:hover,
 439         .pagination .next:focus,
 440         .widget_calendar tbody a:hover,
 441         .widget_calendar tbody a:focus,
 442         .page-links a:hover,
 443         .page-links a:focus {
 444                 background-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
 445                 background-color: {$colors['secondary_textcolor']};
 446         }
 447
 448         /* Secondary Text Color */
 449         blockquote,
 450         a:hover,
 451         a:focus,
 452         .main-navigation .menu-item-description,
 453         .post-navigation .meta-nav,
 454         .post-navigation a:hover .post-title,
 455         .post-navigation a:focus .post-title,
 456         .image-navigation,
 457         .image-navigation a,
 458         .comment-navigation,
 459         .comment-navigation a,
 460         .widget,
 461         .author-heading,
 462         .entry-footer,
 463         .entry-footer a,
 464         .taxonomy-description,
 465         .page-links > .page-links-title,
 466         .entry-caption,
 467         .comment-author,
 468         .comment-metadata,
 469         .comment-metadata a,
 470         .pingback .edit-link,
 471         .pingback .edit-link a,
 472         .post-password-form label,
 473         .comment-form label,
 474         .comment-notes,
 475         .comment-awaiting-moderation,
 476         .logged-in-as,
 477         .form-allowed-tags,
 478         .no-comments,
 479         .site-info,
 480         .site-info a,
 481         .wp-caption-text,
 482         .gallery-caption,
 483         .comment-list .reply a,
 484         .widecolumn label,
 485         .widecolumn .mu_register label {
 486                 color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
 487                 color: {$colors['secondary_textcolor']};
 488         }
 489
 490         /* Secondary Text Color */
 491         blockquote,
 492         .logged-in-as a:hover,
 493         .comment-author a:hover {
 494                 border-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
 495                 border-color: {$colors['secondary_textcolor']};
 496         }
 497
 498         /* Border Color */
 499         hr,
 500         .dropdown-toggle:hover,
 501         .dropdown-toggle:focus {
 502                 background-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
 503                 background-color: {$colors['border_color']};
 504         }
 505
 506         /* Border Color */
 507         pre,
 508         abbr[title],
 509         table,
 510         th,
 511         td,
 512         input,
 513         textarea,
 514         .main-navigation ul,
 515         .main-navigation li,
 516         .post-navigation,
 517         .post-navigation div + div,
 518         .pagination,
 519         .comment-navigation,
 520         .widget li,
 521         .widget_categories .children,
 522         .widget_nav_menu .sub-menu,
 523         .widget_pages .children,
 524         .site-header,
 525         .site-footer,
 526         .hentry + .hentry,
 527         .author-info,
 528         .entry-content .page-links a,
 529         .page-links > span,
 530         .page-header,
 531         .comments-area,
 532         .comment-list + .comment-respond,
 533         .comment-list article,
 534         .comment-list .pingback,
 535         .comment-list .trackback,
 536         .comment-list .reply a,
 537         .no-comments {
 538                 border-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
 539                 border-color: {$colors['border_color']};
 540         }
 541
 542         /* Border Focus Color */
 543         a:focus,
 544         button:focus,
 545         input:focus {
 546                 outline-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
 547                 outline-color: {$colors['border_focus_color']};
 548         }
 549
 550         input:focus,
 551         textarea:focus {
 552                 border-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
 553                 border-color: {$colors['border_focus_color']};
 554         }
 555
 556         /* Sidebar Link Color */
 557         .secondary-toggle:before {
 558                 color: {$colors['sidebar_textcolor']};
 559         }
 560
 561         .site-title a,
 562         .site-description {
 563                 color: {$colors['sidebar_textcolor']};
 564         }
 565
 566         /* Sidebar Text Color */
 567         .site-title a:hover,
 568         .site-title a:focus {
 569                 color: {$colors['secondary_sidebar_textcolor']};
 570         }
 571
 572         /* Sidebar Border Color */
 573         .secondary-toggle {
 574                 border-color: {$colors['sidebar_textcolor']}; /* Fallback for IE7 and IE8 */
 575                 border-color: {$colors['sidebar_border_color']};
 576         }
 577
 578         /* Sidebar Border Focus Color */
 579         .secondary-toggle:hover,
 580         .secondary-toggle:focus {
 581                 border-color: {$colors['sidebar_textcolor']}; /* Fallback for IE7 and IE8 */
 582                 border-color: {$colors['sidebar_border_focus_color']};
 583         }
 584
 585         .site-title a {
 586                 outline-color: {$colors['sidebar_textcolor']}; /* Fallback for IE7 and IE8 */
 587                 outline-color: {$colors['sidebar_border_focus_color']};
 588         }
 589
 590         /* Meta Background Color */
 591         .entry-footer {
 592                 background-color: {$colors['meta_box_background_color']};
 593         }
 594
 595         @media screen and (min-width: 38.75em) {
 596                 /* Main Text Color */
 597                 .page-header {
 598                         border-color: {$colors['textcolor']};
 599                 }
 600         }
 601
 602         @media screen and (min-width: 59.6875em) {
 603                 /* Make sure its transparent on desktop */
 604                 .site-header,
 605                 .secondary {
 606                         background-color: transparent;
 607                 }
 608
 609                 /* Sidebar Background Color */
 610                 .widget button,
 611                 .widget input[type="button"],
 612                 .widget input[type="reset"],
 613                 .widget input[type="submit"],
 614                 .widget_calendar tbody a,
 615                 .widget_calendar tbody a:hover,
 616                 .widget_calendar tbody a:focus {
 617                         color: {$colors['header_background_color']};
 618                 }
 619
 620                 /* Sidebar Link Color */
 621                 .secondary a,
 622                 .dropdown-toggle:after,
 623                 .widget-title,
 624                 .widget blockquote cite,
 625                 .widget blockquote small {
 626                         color: {$colors['sidebar_textcolor']};
 627                 }
 628
 629                 .widget button,
 630                 .widget input[type="button"],
 631                 .widget input[type="reset"],
 632                 .widget input[type="submit"],
 633                 .widget_calendar tbody a {
 634                         background-color: {$colors['sidebar_textcolor']};
 635                 }
 636
 637                 .textwidget a {
 638                         border-color: {$colors['sidebar_textcolor']};
 639                 }
 640
 641                 /* Sidebar Text Color */
 642                 .secondary a:hover,
 643                 .secondary a:focus,
 644                 .main-navigation .menu-item-description,
 645                 .widget,
 646                 .widget blockquote,
 647                 .widget .wp-caption-text,
 648                 .widget .gallery-caption {
 649                         color: {$colors['secondary_sidebar_textcolor']};
 650                 }
 651
 652                 .widget button:hover,
 653                 .widget button:focus,
 654                 .widget input[type="button"]:hover,
 655                 .widget input[type="button"]:focus,
 656                 .widget input[type="reset"]:hover,
 657                 .widget input[type="reset"]:focus,
 658                 .widget input[type="submit"]:hover,
 659                 .widget input[type="submit"]:focus,
 660                 .widget_calendar tbody a:hover,
 661                 .widget_calendar tbody a:focus {
 662                         background-color: {$colors['secondary_sidebar_textcolor']};
 663                 }
 664
 665                 .widget blockquote {
 666                         border-color: {$colors['secondary_sidebar_textcolor']};
 667                 }
 668
 669                 /* Sidebar Border Color */
 670                 .main-navigation ul,
 671                 .main-navigation li,
 672                 .widget input,
 673                 .widget textarea,
 674                 .widget table,
 675                 .widget th,
 676                 .widget td,
 677                 .widget pre,
 678                 .widget li,
 679                 .widget_categories .children,
 680                 .widget_nav_menu .sub-menu,
 681                 .widget_pages .children,
 682                 .widget abbr[title] {
 683                         border-color: {$colors['sidebar_border_color']};
 684                 }
 685
 686                 .dropdown-toggle:hover,
 687                 .dropdown-toggle:focus,
 688                 .widget hr {
 689                         background-color: {$colors['sidebar_border_color']};
 690                 }
 691
 692                 .widget input:focus,
 693                 .widget textarea:focus {
 694                         border-color: {$colors['sidebar_border_focus_color']};
 695                 }
 696
 697                 .sidebar a:focus,
 698                 .dropdown-toggle:focus {
 699                         outline-color: {$colors['sidebar_border_focus_color']};
 700                 }
 701         }
 702 CSS;
 703
 704         return $css;
 705 }
 706
 707 /**
 708  * Output an Underscore template for generating CSS for the color scheme.
 709  *
 710  * The template generates the css dynamically for instant display in the Customizer
 711  * preview.
 712  *
 713  * @since Twenty Fifteen 1.0
 714  */
 715 function twentyfifteen_color_scheme_css_template() {
 716         $colors = array(
 717                 'background_color'            => '{{ data.background_color }}',
 718                 'header_background_color'     => '{{ data.header_background_color }}',
 719                 'box_background_color'        => '{{ data.box_background_color }}',
 720                 'textcolor'                   => '{{ data.textcolor }}',
 721                 'secondary_textcolor'         => '{{ data.secondary_textcolor }}',
 722                 'border_color'                => '{{ data.border_color }}',
 723                 'border_focus_color'          => '{{ data.border_focus_color }}',
 724                 'sidebar_textcolor'           => '{{ data.sidebar_textcolor }}',
 725                 'sidebar_border_color'        => '{{ data.sidebar_border_color }}',
 726                 'sidebar_border_focus_color'  => '{{ data.sidebar_border_focus_color }}',
 727                 'secondary_sidebar_textcolor' => '{{ data.secondary_sidebar_textcolor }}',
 728                 'meta_box_background_color'   => '{{ data.meta_box_background_color }}',
 729         );
 730         ?>
 731         <script type="text/html" id="tmpl-twentyfifteen-color-scheme">
 732                 <?php echo twentyfifteen_get_color_scheme_css( $colors ); ?>
 733         </script>
 734         <?php
 735 }
 736 add_action( 'customize_controls_print_footer_scripts', 'twentyfifteen_color_scheme_css_template' );