[Summary view] [Print] [Text view]

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