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