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 }