WordPress 4.7
[autoinstalls/wordpress.git] / wp-content / themes / twentyseventeen / inc / color-patterns.php
1 <?php
2 /**
3  * Twenty Seventeen: Color Patterns
4  *
5  * @package WordPress
6  * @subpackage Twenty_Seventeen
7  * @since 1.0
8  */
9
10 /**
11  * Generate the CSS for the current custom color scheme.
12  */
13 function twentyseventeen_custom_colors_css() {
14         $hue = absint( get_theme_mod( 'colorscheme_hue', 250 ) );
15
16         /**
17          * Filter Twenty Seventeen default saturation level.
18          *
19          * @since Twenty Seventeen 1.0
20          *
21          * @param $saturation integer
22          */
23         $saturation = absint( apply_filters( 'twentyseventeen_custom_colors_saturation', 50 ) );
24         $reduced_saturation = ( .8 * $saturation ) . '%';
25         $saturation = $saturation . '%';
26         $css = '
27 /**
28  * Twenty Seventeen: Color Patterns
29  *
30  * Colors are ordered from dark to light.
31  */
32
33 .colors-custom a:hover,
34 .colors-custom a:active,
35 .colors-custom .entry-content a:focus,
36 .colors-custom .entry-content a:hover,
37 .colors-custom .entry-summary a:focus,
38 .colors-custom .entry-summary a:hover,
39 .colors-custom .widget a:focus,
40 .colors-custom .widget a:hover,
41 .colors-custom .site-footer .widget-area a:focus,
42 .colors-custom .site-footer .widget-area a:hover,
43 .colors-custom .posts-navigation a:focus,
44 .colors-custom .posts-navigation a:hover,
45 .colors-custom .comment-metadata a:focus,
46 .colors-custom .comment-metadata a:hover,
47 .colors-custom .comment-metadata a.comment-edit-link:focus,
48 .colors-custom .comment-metadata a.comment-edit-link:hover,
49 .colors-custom .comment-reply-link:focus,
50 .colors-custom .comment-reply-link:hover,
51 .colors-custom .widget_authors a:focus strong,
52 .colors-custom .widget_authors a:hover strong,
53 .colors-custom .entry-title a:focus,
54 .colors-custom .entry-title a:hover,
55 .colors-custom .entry-meta a:focus,
56 .colors-custom .entry-meta a:hover,
57 .colors-custom.blog .entry-meta a.post-edit-link:focus,
58 .colors-custom.blog .entry-meta a.post-edit-link:hover,
59 .colors-custom.archive .entry-meta a.post-edit-link:focus,
60 .colors-custom.archive .entry-meta a.post-edit-link:hover,
61 .colors-custom.search .entry-meta a.post-edit-link:focus,
62 .colors-custom.search .entry-meta a.post-edit-link:hover,
63 .colors-custom .page-links a:focus .page-number,
64 .colors-custom .page-links a:hover .page-number,
65 .colors-custom .entry-footer a:focus,
66 .colors-custom .entry-footer a:hover,
67 .colors-custom .entry-footer .cat-links a:focus,
68 .colors-custom .entry-footer .cat-links a:hover,
69 .colors-custom .entry-footer .tags-links a:focus,
70 .colors-custom .entry-footer .tags-links a:hover,
71 .colors-custom .post-navigation a:focus,
72 .colors-custom .post-navigation a:hover,
73 .colors-custom .pagination a:not(.prev):not(.next):focus,
74 .colors-custom .pagination a:not(.prev):not(.next):hover,
75 .colors-custom .comments-pagination a:not(.prev):not(.next):focus,
76 .colors-custom .comments-pagination a:not(.prev):not(.next):hover,
77 .colors-custom .logged-in-as a:focus,
78 .colors-custom .logged-in-as a:hover,
79 .colors-custom a:focus .nav-title,
80 .colors-custom a:hover .nav-title,
81 .colors-custom .edit-link a:focus,
82 .colors-custom .edit-link a:hover,
83 .colors-custom .site-info a:focus,
84 .colors-custom .site-info a:hover,
85 .colors-custom .widget .widget-title a:focus,
86 .colors-custom .widget .widget-title a:hover,
87 .colors-custom .widget ul li a:focus,
88 .colors-custom .widget ul li a:hover {
89         color: hsl( ' . $hue . ', ' . $saturation . ', 0% ); /* base: #000; */
90 }
91
92 .colors-custom .entry-content a,
93 .colors-custom .entry-summary a,
94 .colors-custom .widget a,
95 .colors-custom .site-footer .widget-area a,
96 .colors-custom .posts-navigation a,
97 .colors-custom .widget_authors a strong {
98         -webkit-box-shadow: inset 0 -1px 0 hsl( ' . $hue . ', ' . $saturation  . ', 6% ); /* base: rgba(15, 15, 15, 1); */
99         box-shadow: inset 0 -1px 0 hsl( ' . $hue . ', ' . $saturation . ', 6% ); /* base: rgba(15, 15, 15, 1); */
100 }
101
102 .colors-custom button,
103 .colors-custom input[type="button"],
104 .colors-custom input[type="submit"],
105 .colors-custom .entry-footer .edit-link a.post-edit-link {
106         background-color: hsl( ' . $hue . ', ' . $saturation . ', 13% ); /* base: #222; */
107 }
108
109 .colors-custom input[type="text"]:focus,
110 .colors-custom input[type="email"]:focus,
111 .colors-custom input[type="url"]:focus,
112 .colors-custom input[type="password"]:focus,
113 .colors-custom input[type="search"]:focus,
114 .colors-custom input[type="number"]:focus,
115 .colors-custom input[type="tel"]:focus,
116 .colors-custom input[type="range"]:focus,
117 .colors-custom input[type="date"]:focus,
118 .colors-custom input[type="month"]:focus,
119 .colors-custom input[type="week"]:focus,
120 .colors-custom input[type="time"]:focus,
121 .colors-custom input[type="datetime"]:focus,
122 .colors-custom .colors-custom input[type="datetime-local"]:focus,
123 .colors-custom input[type="color"]:focus,
124 .colors-custom textarea:focus,
125 .colors-custom button.secondary,
126 .colors-custom input[type="reset"],
127 .colors-custom input[type="button"].secondary,
128 .colors-custom input[type="reset"].secondary,
129 .colors-custom input[type="submit"].secondary,
130 .colors-custom a,
131 .colors-custom .site-title,
132 .colors-custom .site-title a,
133 .colors-custom .navigation-top a,
134 .colors-custom .dropdown-toggle,
135 .colors-custom .menu-toggle,
136 .colors-custom .page .panel-content .entry-title,
137 .colors-custom .page-title,
138 .colors-custom.page:not(.twentyseventeen-front-page) .entry-title,
139 .colors-custom .page-links a .page-number,
140 .colors-custom .comment-metadata a.comment-edit-link,
141 .colors-custom .comment-reply-link .icon,
142 .colors-custom h2.widget-title,
143 .colors-custom mark,
144 .colors-custom .post-navigation a:focus .icon,
145 .colors-custom .post-navigation a:hover .icon,
146 .colors-custom .site-content .site-content-light,
147 .colors-custom .twentyseventeen-panel .recent-posts .entry-header .edit-link {
148         color: hsl( ' . $hue . ', ' . $saturation . ', 13% ); /* base: #222; */
149 }
150
151 .colors-custom .entry-content a:focus,
152 .colors-custom .entry-content a:hover,
153 .colors-custom .entry-summary a:focus,
154 .colors-custom .entry-summary a:hover,
155 .colors-custom .widget a:focus,
156 .colors-custom .widget a:hover,
157 .colors-custom .site-footer .widget-area a:focus,
158 .colors-custom .site-footer .widget-area a:hover,
159 .colors-custom .posts-navigation a:focus,
160 .colors-custom .posts-navigation a:hover,
161 .colors-custom .comment-metadata a:focus,
162 .colors-custom .comment-metadata a:hover,
163 .colors-custom .comment-metadata a.comment-edit-link:focus,
164 .colors-custom .comment-metadata a.comment-edit-link:hover,
165 .colors-custom .comment-reply-link:focus,
166 .colors-custom .comment-reply-link:hover,
167 .colors-custom .widget_authors a:focus strong,
168 .colors-custom .widget_authors a:hover strong,
169 .colors-custom .entry-title a:focus,
170 .colors-custom .entry-title a:hover,
171 .colors-custom .entry-meta a:focus,
172 .colors-custom .entry-meta a:hover,
173 .colors-custom.blog .entry-meta a.post-edit-link:focus,
174 .colors-custom.blog .entry-meta a.post-edit-link:hover,
175 .colors-custom.archive .entry-meta a.post-edit-link:focus,
176 .colors-custom.archive .entry-meta a.post-edit-link:hover,
177 .colors-custom.search .entry-meta a.post-edit-link:focus,
178 .colors-custom.search .entry-meta a.post-edit-link:hover,
179 .colors-custom .page-links a:focus .page-number,
180 .colors-custom .page-links a:hover .page-number,
181 .colors-custom .entry-footer .cat-links a:focus,
182 .colors-custom .entry-footer .cat-links a:hover,
183 .colors-custom .entry-footer .tags-links a:focus,
184 .colors-custom .entry-footer .tags-links a:hover,
185 .colors-custom .post-navigation a:focus,
186 .colors-custom .post-navigation a:hover,
187 .colors-custom .pagination a:not(.prev):not(.next):focus,
188 .colors-custom .pagination a:not(.prev):not(.next):hover,
189 .colors-custom .comments-pagination a:not(.prev):not(.next):focus,
190 .colors-custom .comments-pagination a:not(.prev):not(.next):hover,
191 .colors-custom .logged-in-as a:focus,
192 .colors-custom .logged-in-as a:hover,
193 .colors-custom a:focus .nav-title,
194 .colors-custom a:hover .nav-title,
195 .colors-custom .edit-link a:focus,
196 .colors-custom .edit-link a:hover,
197 .colors-custom .site-info a:focus,
198 .colors-custom .site-info a:hover,
199 .colors-custom .widget .widget-title a:focus,
200 .colors-custom .widget .widget-title a:hover,
201 .colors-custom .widget ul li a:focus,
202 .colors-custom .widget ul li a:hover {
203         -webkit-box-shadow: inset 0 0 0 hsl( ' . $hue . ', ' . $saturation . ', 13% ), 0 3px 0 hsl( ' . $hue . ', ' . $saturation . ', 13% );
204         box-shadow: inset 0 0 0 hsl( ' . $hue . ', ' . $saturation. ' , 13% ), 0 3px 0 hsl( ' . $hue . ', ' . $saturation . ', 13% );
205 }
206
207 body.colors-custom,
208 .colors-custom button,
209 .colors-custom input,
210 .colors-custom select,
211 .colors-custom textarea,
212 .colors-custom h3,
213 .colors-custom h4,
214 .colors-custom h6,
215 .colors-custom label,
216 .colors-custom .entry-title a,
217 .colors-custom.twentyseventeen-front-page .panel-content .recent-posts article,
218 .colors-custom .entry-footer .cat-links a,
219 .colors-custom .entry-footer .tags-links a,
220 .colors-custom .format-quote blockquote,
221 .colors-custom .nav-title,
222 .colors-custom .comment-body,
223 .colors-custom .site-content .wp-playlist-light .wp-playlist-current-item .wp-playlist-item-album {
224         color: hsl( ' . $hue . ', ' . $reduced_saturation . ', 20% ); /* base: #333; */
225 }
226
227 .colors-custom .social-navigation a:hover,
228 .colors-custom .social-navigation a:focus {
229         background: hsl( ' . $hue . ', ' . $reduced_saturation . ', 20% ); /* base: #333; */
230 }
231
232 .colors-custom input[type="text"]:focus,
233 .colors-custom input[type="email"]:focus,
234 .colors-custom input[type="url"]:focus,
235 .colors-custom input[type="password"]:focus,
236 .colors-custom input[type="search"]:focus,
237 .colors-custom input[type="number"]:focus,
238 .colors-custom input[type="tel"]:focus,
239 .colors-custom input[type="range"]:focus,
240 .colors-custom input[type="date"]:focus,
241 .colors-custom input[type="month"]:focus,
242 .colors-custom input[type="week"]:focus,
243 .colors-custom input[type="time"]:focus,
244 .colors-custom input[type="datetime"]:focus,
245 .colors-custom input[type="datetime-local"]:focus,
246 .colors-custom input[type="color"]:focus,
247 .colors-custom textarea:focus,
248 .bypostauthor > .comment-body > .comment-meta > .comment-author .avatar {
249         border-color: hsl( ' . $hue . ', ' . $reduced_saturation . ', 20% ); /* base: #333; */
250 }
251
252 .colors-custom h2,
253 .colors-custom blockquote,
254 .colors-custom input[type="text"],
255 .colors-custom input[type="email"],
256 .colors-custom input[type="url"],
257 .colors-custom input[type="password"],
258 .colors-custom input[type="search"],
259 .colors-custom input[type="number"],
260 .colors-custom input[type="tel"],
261 .colors-custom input[type="range"],
262 .colors-custom input[type="date"],
263 .colors-custom input[type="month"],
264 .colors-custom input[type="week"],
265 .colors-custom input[type="time"],
266 .colors-custom input[type="datetime"],
267 .colors-custom input[type="datetime-local"],
268 .colors-custom input[type="color"],
269 .colors-custom textarea,
270 .colors-custom .site-description,
271 .colors-custom .entry-content blockquote.alignleft,
272 .colors-custom .entry-content blockquote.alignright,
273 .colors-custom .colors-custom .taxonomy-description,
274 .colors-custom .site-info a,
275 .colors-custom .wp-caption,
276 .colors-custom .gallery-caption {
277         color: hsl( ' . $hue . ', ' . $saturation . ', 40% ); /* base: #666; */
278 }
279
280 .colors-custom abbr,
281 .colors-custom acronym {
282         border-bottom-color: hsl( ' . $hue . ', ' . $saturation . ', 40% ); /* base: #666; */
283 }
284
285 .colors-custom h5,
286 .colors-custom .entry-meta,
287 .colors-custom .entry-meta a,
288 .colors-custom.blog .entry-meta a.post-edit-link,
289 .colors-custom.archive .entry-meta a.post-edit-link,
290 .colors-custom.search .entry-meta a.post-edit-link,
291 .colors-custom .nav-subtitle,
292 .colors-custom .comment-metadata,
293 .colors-custom .comment-metadata a,
294 .colors-custom .no-comments,
295 .colors-custom .comment-awaiting-moderation,
296 .colors-custom .page-numbers.current,
297 .colors-custom .page-links .page-number,
298 .colors-custom .navigation-top .current-menu-item > a,
299 .colors-custom .navigation-top .current_page_item > a,
300 .colors-custom .main-navigation a:hover,
301 .colors-custom .site-content .wp-playlist-light .wp-playlist-current-item .wp-playlist-item-artist {
302         color: hsl( ' . $hue . ', ' . $saturation . ', 46% ); /* base: #767676; */
303 }
304
305 .colors-custom button:hover,
306 .colors-custom button:focus,
307 .colors-custom input[type="button"]:hover,
308 .colors-custom input[type="button"]:focus,
309 .colors-custom input[type="submit"]:hover,
310 .colors-custom input[type="submit"]:focus,
311 .colors-custom .entry-footer .edit-link a.post-edit-link:hover,
312 .colors-custom .entry-footer .edit-link a.post-edit-link:focus,
313 .colors-custom .social-navigation a,
314 .colors-custom .prev.page-numbers:focus,
315 .colors-custom .prev.page-numbers:hover,
316 .colors-custom .next.page-numbers:focus,
317 .colors-custom .next.page-numbers:hover,
318 .colors-custom .site-content .wp-playlist-light .wp-playlist-item:hover,
319 .colors-custom .site-content .wp-playlist-light .wp-playlist-item:focus {
320         background: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 46% ); /* base: #767676; */
321 }
322
323 .colors-custom button.secondary:hover,
324 .colors-custom button.secondary:focus,
325 .colors-custom input[type="reset"]:hover,
326 .colors-custom input[type="reset"]:focus,
327 .colors-custom input[type="button"].secondary:hover,
328 .colors-custom input[type="button"].secondary:focus,
329 .colors-custom input[type="reset"].secondary:hover,
330 .colors-custom input[type="reset"].secondary:focus,
331 .colors-custom input[type="submit"].secondary:hover,
332 .colors-custom input[type="submit"].secondary:focus,
333 .colors-custom hr {
334         background: hsl( ' . $hue . ', ' . $saturation . ', 73% ); /* base: #bbb; */
335 }
336
337 .colors-custom input[type="text"],
338 .colors-custom input[type="email"],
339 .colors-custom input[type="url"],
340 .colors-custom input[type="password"],
341 .colors-custom input[type="search"],
342 .colors-custom input[type="number"],
343 .colors-custom input[type="tel"],
344 .colors-custom input[type="range"],
345 .colors-custom input[type="date"],
346 .colors-custom input[type="month"],
347 .colors-custom input[type="week"],
348 .colors-custom input[type="time"],
349 .colors-custom input[type="datetime"],
350 .colors-custom input[type="datetime-local"],
351 .colors-custom input[type="color"],
352 .colors-custom textarea,
353 .colors-custom select,
354 .colors-custom fieldset,
355 .colors-custom .widget .tagcloud a:hover,
356 .colors-custom .widget .tagcloud a:focus,
357 .colors-custom .widget.widget_tag_cloud a:hover,
358 .colors-custom .widget.widget_tag_cloud a:focus,
359 .colors-custom .wp_widget_tag_cloud a:hover,
360 .colors-custom .wp_widget_tag_cloud a:focus {
361         border-color: hsl( ' . $hue . ', ' . $saturation . ', 73% ); /* base: #bbb; */
362 }
363
364 .colors-custom thead th {
365         border-bottom-color: hsl( ' . $hue . ', ' . $saturation . ', 73% ); /* base: #bbb; */
366 }
367
368 .colors-custom .entry-footer .cat-links .icon,
369 .colors-custom .entry-footer .tags-links .icon {
370         color: hsl( ' . $hue . ', ' . $saturation . ', 73% ); /* base: #bbb; */
371 }
372
373 .colors-custom button.secondary,
374 .colors-custom input[type="reset"],
375 .colors-custom input[type="button"].secondary,
376 .colors-custom input[type="reset"].secondary,
377 .colors-custom input[type="submit"].secondary,
378 .colors-custom .prev.page-numbers,
379 .colors-custom .next.page-numbers {
380         background-color: hsl( ' . $hue . ', ' . $saturation . ', 87% ); /* base: #ddd; */
381 }
382
383 .colors-custom .widget .tagcloud a,
384 .colors-custom .widget.widget_tag_cloud a,
385 .colors-custom .wp_widget_tag_cloud a {
386         border-color: hsl( ' . $hue . ', ' . $saturation . ', 87% ); /* base: #ddd; */
387 }
388
389 .colors-custom.twentyseventeen-front-page article:not(.has-post-thumbnail):not(:first-child),
390 .colors-custom .widget ul li {
391         border-top-color: hsl( ' . $hue . ', ' . $saturation . ', 87% ); /* base: #ddd; */
392 }
393
394 .colors-custom .widget ul li {
395         border-bottom-color: hsl( ' . $hue . ', ' . $saturation . ', 87% ); /* base: #ddd; */
396 }
397
398 .colors-custom pre,
399 .colors-custom mark,
400 .colors-custom ins {
401         background: hsl( ' . $hue . ', ' . $saturation . ', 93% ); /* base: #eee; */
402 }
403
404 .colors-custom .navigation-top,
405 .colors-custom .main-navigation > div > ul,
406 .colors-custom .pagination,
407 .colors-custom .comments-pagination,
408 .colors-custom .entry-footer,
409 .colors-custom .site-footer {
410         border-top-color: hsl( ' . $hue . ', ' . $saturation . ', 93% ); /* base: #eee; */
411 }
412
413 .colors-custom .navigation-top,
414 .colors-custom .main-navigation li,
415 .colors-custom .entry-footer,
416 .colors-custom .single-featured-image-header,
417 .colors-custom .site-content .wp-playlist-light .wp-playlist-item,
418 .colors-custom tr {
419         border-bottom-color: hsl( ' . $hue . ', ' . $saturation . ', 93% ); /* base: #eee; */
420 }
421
422 .colors-custom .site-content .wp-playlist-light {
423         border-color: hsl( ' . $hue . ', ' . $saturation . ', 93% ); /* base: #eee; */
424 }
425
426 .colors-custom .site-header,
427 .colors-custom .single-featured-image-header {
428         background-color: hsl( ' . $hue . ', ' . $saturation . ', 98% ); /* base: #fafafa; */
429 }
430
431 .colors-custom button,
432 .colors-custom input[type="button"],
433 .colors-custom input[type="submit"],
434 .colors-custom .entry-footer .edit-link a.post-edit-link,
435 .colors-custom .social-navigation a,
436 .colors-custom .site-content .wp-playlist-light a.wp-playlist-caption:hover,
437 .colors-custom .site-content .wp-playlist-light .wp-playlist-item:hover a,
438 .colors-custom .site-content .wp-playlist-light .wp-playlist-item:focus a,
439 .colors-custom .site-content .wp-playlist-light .wp-playlist-item:hover,
440 .colors-custom .site-content .wp-playlist-light .wp-playlist-item:focus,
441 .colors-custom .prev.page-numbers:focus,
442 .colors-custom .prev.page-numbers:hover,
443 .colors-custom .next.page-numbers:focus,
444 .colors-custom .next.page-numbers:hover,
445 .colors-custom.has-header-image .site-title,
446 .colors-custom.has-header-video .site-title,
447 .colors-custom.has-header-image .site-title a,
448 .colors-custom.has-header-video .site-title a,
449 .colors-custom.has-header-image .site-description,
450 .colors-custom.has-header-video .site-description {
451         color: hsl( ' . $hue . ', ' . $saturation . ', 100% ); /* base: #fff; */
452 }
453
454 body.colors-custom,
455 .colors-custom .navigation-top,
456 .colors-custom .main-navigation ul {
457         background: hsl( ' . $hue . ', ' . $saturation . ', 100% ); /* base: #fff; */
458 }
459
460 .colors-custom .widget ul li a,
461 .colors-custom .site-footer .widget-area ul li a {
462         -webkit-box-shadow: inset 0 -1px 0 hsl( ' . $hue . ', ' . $saturation . ', 100% ); /* base: rgba(255, 255, 255, 1); */
463         box-shadow: inset 0 -1px 0 hsl( ' . $hue . ', ' . $saturation . ', 100% );  /* base: rgba(255, 255, 255, 1); */
464 }
465
466 .colors-custom .menu-toggle,
467 .colors-custom .menu-toggle:hover,
468 .colors-custom .menu-toggle:focus,
469 .colors-custom .menu .dropdown-toggle,
470 .colors-custom .menu-scroll-down,
471 .colors-custom .menu-scroll-down:hover,
472 .colors-custom .menu-scroll-down:focus {
473         background-color: transparent;
474 }
475
476 .colors-custom .widget .tagcloud a,
477 .colors-custom .widget .tagcloud a:focus,
478 .colors-custom .widget .tagcloud a:hover,
479 .colors-custom .widget.widget_tag_cloud a,
480 .colors-custom .widget.widget_tag_cloud a:focus,
481 .colors-custom .widget.widget_tag_cloud a:hover,
482 .colors-custom .wp_widget_tag_cloud a,
483 .colors-custom .wp_widget_tag_cloud a:focus,
484 .colors-custom .wp_widget_tag_cloud a:hover,
485 .colors-custom .entry-footer .edit-link a.post-edit-link:focus,
486 .colors-custom .entry-footer .edit-link a.post-edit-link:hover {
487         -webkit-box-shadow: none !important;
488         box-shadow: none !important;
489 }
490
491 /* Reset non-customizable hover styling for links */
492 .colors-custom .entry-content a:hover,
493 .colors-custom .entry-content a:focus,
494 .colors-custom .entry-summary a:hover,
495 .colors-custom .entry-summary a:focus,
496 .colors-custom .widget a:hover,
497 .colors-custom .widget a:focus,
498 .colors-custom .site-footer .widget-area a:hover,
499 .colors-custom .site-footer .widget-area a:focus,
500 .colors-custom .posts-navigation a:hover,
501 .colors-custom .posts-navigation a:focus,
502 .colors-custom .widget_authors a:hover strong,
503 .colors-custom .widget_authors a:focus strong {
504         -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(0, 0, 0, 1);
505         box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(0, 0, 0, 1);
506 }
507
508 .colors-custom .gallery-item a,
509 .colors-custom .gallery-item a:hover,
510 .colors-custom .gallery-item a:focus {
511         -webkit-box-shadow: none;
512         box-shadow: none;
513 }
514
515 @media screen and (min-width: 48em) {
516
517         .colors-custom .nav-links .nav-previous .nav-title .icon,
518         .colors-custom .nav-links .nav-next .nav-title .icon {
519                 color: hsl( ' . $hue . ', ' . $saturation . ', 20% ); /* base: #222; */
520         }
521
522         .colors-custom .main-navigation li li:hover,
523         .colors-custom .main-navigation li li.focus {
524                 background: hsl( ' . $hue . ', ' . $saturation . ', 46% ); /* base: #767676; */
525         }
526
527         .colors-custom .navigation-top .menu-scroll-down {
528                 color: hsl( ' . $hue . ', ' . $saturation . ', 46% ); /* base: #767676; */;
529         }
530
531         .colors-custom abbr[title] {
532                 border-bottom-color: hsl( ' . $hue . ', ' . $saturation . ', 46% ); /* base: #767676; */;
533         }
534
535         .colors-custom .main-navigation ul ul {
536                 border-color: hsl( ' . $hue . ', ' . $saturation . ', 73% ); /* base: #bbb; */
537                 background: hsl( ' . $hue . ', ' . $saturation . ', 100% ); /* base: #fff; */
538         }
539
540         .colors-custom .main-navigation ul li.menu-item-has-children:before,
541         .colors-custom .main-navigation ul li.page_item_has_children:before {
542                 border-bottom-color: hsl( ' . $hue . ', ' . $saturation . ', 73% ); /* base: #bbb; */
543         }
544
545         .colors-custom .main-navigation ul li.menu-item-has-children:after,
546         .colors-custom .main-navigation ul li.page_item_has_children:after {
547                 border-bottom-color: hsl( ' . $hue . ', ' . $saturation . ', 100% ); /* base: #fff; */
548         }
549
550         .colors-custom .main-navigation li li.focus > a,
551         .colors-custom .main-navigation li li:focus > a,
552         .colors-custom .main-navigation li li:hover > a,
553         .colors-custom .main-navigation li li a:hover,
554         .colors-custom .main-navigation li li a:focus,
555         .colors-custom .main-navigation li li.current_page_item a:hover,
556         .colors-custom .main-navigation li li.current-menu-item a:hover,
557         .colors-custom .main-navigation li li.current_page_item a:focus,
558         .colors-custom .main-navigation li li.current-menu-item a:focus {
559                 color: hsl( ' . $hue . ', ' . $saturation . ', 100% ); /* base: #fff; */
560         }
561 }';
562
563
564         /**
565          * Filters Twenty Seventeen custom colors CSS.
566          *
567          * @since Twenty Seventeen 1.0
568          *
569          * @param $css        string Base theme colors CSS.
570          * @param $hue        int    The user's selected color hue.
571          * @param $saturation string Filtered theme color saturation level.
572          */
573         return apply_filters( 'twentyseventeen_custom_colors_css', $css, $hue, $saturation );
574 }