Ticket #38449: 38449.diff
File 38449.diff, 13.6 KB (added by , 8 years ago) |
---|
-
color-patterns.php
11 11 * Generate the CSS for the current custom color scheme. 12 12 */ 13 13 function twentyseventeen_custom_colors_css() { 14 $hue = get_theme_mod( 'colorscheme_hue', 250);14 $hue = absint( get_theme_mod( 'colorscheme_hue', 250 ) ); 15 15 16 16 /** 17 17 * Filter Twenty Seventeen default saturation level. … … 20 20 * 21 21 * @param $saturation integer 22 22 */ 23 $saturation = a pply_filters( 'twentyseventeen_custom_colors_saturation', 50);23 $saturation = absint( apply_filters( 'twentyseventeen_custom_colors_saturation', 50 ) ); 24 24 $reduced_saturation = ( .8 * $saturation ) . '%'; 25 25 $saturation = $saturation . '%'; 26 26 $css = ' … … 82 82 .colors-custom .widget .widget-title a:hover, 83 83 .colors-custom .widget ul li a:focus, 84 84 .colors-custom .widget ul li a:hover { 85 color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ). ', 0% ); /* base: #000; */85 color: hsl( ' . $hue . ', ' . $saturation . ', 0% ); /* base: #000; */ 86 86 } 87 87 88 88 .colors-custom .entry-content a, … … 91 91 .colors-custom .site-footer .widget-area a, 92 92 .colors-custom .posts-navigation a, 93 93 .colors-custom .widget_authors a strong { 94 -webkit-box-shadow: inset 0 -1px 0 hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ). ', 6% ); /* base: rgba(15, 15, 15, 1); */95 box-shadow: inset 0 -1px 0 hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ). ', 6% ); /* base: rgba(15, 15, 15, 1); */94 -webkit-box-shadow: inset 0 -1px 0 hsl( ' . $hue . ', ' . $saturation . ', 6% ); /* base: rgba(15, 15, 15, 1); */ 95 box-shadow: inset 0 -1px 0 hsl( ' . $hue . ', ' . $saturation . ', 6% ); /* base: rgba(15, 15, 15, 1); */ 96 96 } 97 97 98 98 .colors-custom button, … … 99 99 .colors-custom input[type="button"], 100 100 .colors-custom input[type="submit"], 101 101 .colors-custom .entry-footer .edit-link a.post-edit-link { 102 background-color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ). ', 13% ); /* base: #222; */102 background-color: hsl( ' . $hue . ', ' . $saturation . ', 13% ); /* base: #222; */ 103 103 } 104 104 105 105 .colors-custom input[type="text"]:focus, … … 141 141 .colors-custom .post-navigation a:hover .icon, 142 142 .colors-custom .site-content .site-content-light, 143 143 .colors-custom .twentyseventeen-panel .recent-posts .entry-header .edit-link { 144 color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ). ', 13% ); /* base: #222; */144 color: hsl( ' . $hue . ', ' . $saturation . ', 13% ); /* base: #222; */ 145 145 } 146 146 147 147 .colors-custom .entry-content a:focus, … … 196 196 .colors-custom .widget .widget-title a:hover, 197 197 .colors-custom .widget ul li a:focus, 198 198 .colors-custom .widget ul li a:hover { 199 -webkit-box-shadow: inset 0 0 0 hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 13% ), 0 3px 0 hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ). ', 13% );200 box-shadow: inset 0 0 0 hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 13% ), 0 3px 0 hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ). ', 13% );199 -webkit-box-shadow: inset 0 0 0 hsl( ' . $hue . ', ' . $saturation . ', 13% ), 0 3px 0 hsl( ' . $hue . ', ' . $saturation . ', 13% ); 200 box-shadow: inset 0 0 0 hsl( ' . $hue . ', ' . $saturation. ' , 13% ), 0 3px 0 hsl( ' . $hue . ', ' . $saturation . ', 13% ); 201 201 } 202 202 203 203 body.colors-custom, … … 217 217 .colors-custom .nav-title, 218 218 .colors-custom .comment-body, 219 219 .colors-custom .site-content .wp-playlist-light .wp-playlist-current-item .wp-playlist-item-album { 220 color: hsl( ' . esc_attr( $hue ). ', ' . $reduced_saturation . ', 20% ); /* base: #333; */220 color: hsl( ' . $hue . ', ' . $reduced_saturation . ', 20% ); /* base: #333; */ 221 221 } 222 222 223 223 .colors-custom .social-navigation a:hover, 224 224 .colors-custom .social-navigation a:focus { 225 background: hsl( ' . esc_attr( $hue ). ', ' . $reduced_saturation . ', 20% ); /* base: #333; */225 background: hsl( ' . $hue . ', ' . $reduced_saturation . ', 20% ); /* base: #333; */ 226 226 } 227 227 228 228 .colors-custom input[type="text"]:focus, … … 242 242 .colors-custom input[type="color"]:focus, 243 243 .colors-custom textarea:focus, 244 244 .bypostauthor > .comment-body > .comment-meta > .comment-author .avatar { 245 border-color: hsl( ' . esc_attr( $hue ). ', ' . $reduced_saturation . ', 20% ); /* base: #333; */245 border-color: hsl( ' . $hue . ', ' . $reduced_saturation . ', 20% ); /* base: #333; */ 246 246 } 247 247 248 248 .colors-custom h2, … … 270 270 .colors-custom .site-info a, 271 271 .colors-custom .wp-caption, 272 272 .colors-custom .gallery-caption { 273 color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ). ', 40% ); /* base: #666; */273 color: hsl( ' . $hue . ', ' . $saturation . ', 40% ); /* base: #666; */ 274 274 } 275 275 276 276 .colors-custom abbr, 277 277 .colors-custom acronym { 278 border-bottom-color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ). ', 40% ); /* base: #666; */278 border-bottom-color: hsl( ' . $hue . ', ' . $saturation . ', 40% ); /* base: #666; */ 279 279 } 280 280 281 281 .colors-custom h5, … … 295 295 .colors-custom .navigation-top .current_page_item > a, 296 296 .colors-custom .main-navigation a:hover, 297 297 .colors-custom .site-content .wp-playlist-light .wp-playlist-current-item .wp-playlist-item-artist { 298 color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ). ', 46% ); /* base: #767676; */298 color: hsl( ' . $hue . ', ' . $saturation . ', 46% ); /* base: #767676; */ 299 299 } 300 300 301 301 .colors-custom button:hover, … … 313 313 .colors-custom .next.page-numbers:hover, 314 314 .colors-custom .site-content .wp-playlist-light .wp-playlist-item:hover, 315 315 .colors-custom .site-content .wp-playlist-light .wp-playlist-item:focus { 316 background: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ). ', 46% ); /* base: #767676; */316 background: hsl( ' . $hue . ', ' . $saturation . ', 46% ); /* base: #767676; */ 317 317 } 318 318 319 319 .colors-custom button.secondary:hover, … … 327 327 .colors-custom input[type="submit"].secondary:hover, 328 328 .colors-custom input[type="submit"].secondary:focus, 329 329 .colors-custom hr { 330 background: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ). ', 73% ); /* base: #bbb; */330 background: hsl( ' . $hue . ', ' . $saturation . ', 73% ); /* base: #bbb; */ 331 331 } 332 332 333 333 .colors-custom input[type="text"], … … 354 354 .colors-custom .widget.widget_tag_cloud a:focus, 355 355 .colors-custom .wp_widget_tag_cloud a:hover, 356 356 .colors-custom .wp_widget_tag_cloud a:focus { 357 border-color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ). ', 73% ); /* base: #bbb; */357 border-color: hsl( ' . $hue . ', ' . $saturation . ', 73% ); /* base: #bbb; */ 358 358 } 359 359 360 360 .colors-custom thead th { 361 border-bottom-color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ). ', 73% ); /* base: #bbb; */361 border-bottom-color: hsl( ' . $hue . ', ' . $saturation . ', 73% ); /* base: #bbb; */ 362 362 } 363 363 364 364 .colors-custom .entry-footer .cat-links .icon, 365 365 .colors-custom .entry-footer .tags-links .icon { 366 color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ). ', 73% ); /* base: #bbb; */366 color: hsl( ' . $hue . ', ' . $saturation . ', 73% ); /* base: #bbb; */ 367 367 } 368 368 369 369 .colors-custom button.secondary, … … 373 373 .colors-custom input[type="submit"].secondary, 374 374 .colors-custom .prev.page-numbers, 375 375 .colors-custom .next.page-numbers { 376 background-color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ). ', 87% ); /* base: #ddd; */376 background-color: hsl( ' . $hue . ', ' . $saturation . ', 87% ); /* base: #ddd; */ 377 377 } 378 378 379 379 .colors-custom .widget .tagcloud a, 380 380 .colors-custom .widget.widget_tag_cloud a, 381 381 .colors-custom .wp_widget_tag_cloud a { 382 border-color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ). ', 87% ); /* base: #ddd; */382 border-color: hsl( ' . $hue . ', ' . $saturation . ', 87% ); /* base: #ddd; */ 383 383 } 384 384 385 385 .colors-custom.twentyseventeen-front-page article:not(.has-post-thumbnail):not(:first-child), 386 386 .colors-custom .widget ul li { 387 border-top-color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ). ', 87% ); /* base: #ddd; */387 border-top-color: hsl( ' . $hue . ', ' . $saturation . ', 87% ); /* base: #ddd; */ 388 388 } 389 389 390 390 .colors-custom .widget ul li { 391 border-bottom-color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ). ', 87% ); /* base: #ddd; */391 border-bottom-color: hsl( ' . $hue . ', ' . $saturation . ', 87% ); /* base: #ddd; */ 392 392 } 393 393 394 394 .colors-custom pre, 395 395 .colors-custom mark, 396 396 .colors-custom ins { 397 background: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ). ', 93% ); /* base: #eee; */397 background: hsl( ' . $hue . ', ' . $saturation . ', 93% ); /* base: #eee; */ 398 398 } 399 399 400 400 .colors-custom .navigation-top, … … 403 403 .colors-custom .comments-pagination, 404 404 .colors-custom .entry-footer, 405 405 .colors-custom .site-footer { 406 border-top-color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ). ', 93% ); /* base: #eee; */406 border-top-color: hsl( ' . $hue . ', ' . $saturation . ', 93% ); /* base: #eee; */ 407 407 } 408 408 409 409 .colors-custom .navigation-top, … … 412 412 .colors-custom .single-featured-image-header, 413 413 .colors-custom .site-content .wp-playlist-light .wp-playlist-item, 414 414 .colors-custom tr { 415 border-bottom-color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ). ', 93% ); /* base: #eee; */415 border-bottom-color: hsl( ' . $hue . ', ' . $saturation . ', 93% ); /* base: #eee; */ 416 416 } 417 417 418 418 .colors-custom .site-content .wp-playlist-light { 419 border-color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ). ', 93% ); /* base: #eee; */419 border-color: hsl( ' . $hue . ', ' . $saturation . ', 93% ); /* base: #eee; */ 420 420 } 421 421 422 422 .colors-custom .site-header, 423 423 .colors-custom .single-featured-image-header { 424 background-color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ). ', 98% ); /* base: #fafafa; */424 background-color: hsl( ' . $hue . ', ' . $saturation . ', 98% ); /* base: #fafafa; */ 425 425 } 426 426 427 427 .colors-custom button, … … 441 441 .colors-custom.has-header-image .site-title, 442 442 .colors-custom.has-header-image .site-title a, 443 443 .colors-custom.has-header-image .site-description { 444 color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ). ', 100% ); /* base: #fff; */444 color: hsl( ' . $hue . ', ' . $saturation . ', 100% ); /* base: #fff; */ 445 445 } 446 446 447 447 body.colors-custom, 448 448 .colors-custom .navigation-top, 449 449 .colors-custom .main-navigation ul { 450 background: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ). ', 100% ); /* base: #fff; */450 background: hsl( ' . $hue . ', ' . $saturation . ', 100% ); /* base: #fff; */ 451 451 } 452 452 453 453 .colors-custom .widget ul li a, 454 454 .colors-custom .site-footer .widget-area ul li a { 455 -webkit-box-shadow: inset 0 -1px 0 hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ). ', 100% ); /* base: rgba(255, 255, 255, 1); */456 box-shadow: inset 0 -1px 0 hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ). ', 100% ); /* base: rgba(255, 255, 255, 1); */455 -webkit-box-shadow: inset 0 -1px 0 hsl( ' . $hue . ', ' . $saturation . ', 100% ); /* base: rgba(255, 255, 255, 1); */ 456 box-shadow: inset 0 -1px 0 hsl( ' . $hue . ', ' . $saturation . ', 100% ); /* base: rgba(255, 255, 255, 1); */ 457 457 } 458 458 459 459 .colors-custom .menu-toggle, … … 513 513 514 514 .colors-custom .nav-links .nav-previous .nav-title .icon, 515 515 .colors-custom .nav-links .nav-next .nav-title .icon { 516 color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ). ', 20% ); /* base: #222; */516 color: hsl( ' . $hue . ', ' . $saturation . ', 20% ); /* base: #222; */ 517 517 } 518 518 519 519 .colors-custom .main-navigation li li:hover, 520 520 .colors-custom .main-navigation li li.focus { 521 background: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ). ', 46% ); /* base: #767676; */521 background: hsl( ' . $hue . ', ' . $saturation . ', 46% ); /* base: #767676; */ 522 522 } 523 523 524 524 .colors-custom .navigation-top .menu-scroll-down { 525 color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ). ', 46% ); /* base: #767676; */;525 color: hsl( ' . $hue . ', ' . $saturation . ', 46% ); /* base: #767676; */; 526 526 } 527 527 528 528 .colors-custom abbr[title] { 529 border-bottom-color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ). ', 46% ); /* base: #767676; */;529 border-bottom-color: hsl( ' . $hue . ', ' . $saturation . ', 46% ); /* base: #767676; */; 530 530 } 531 531 532 532 .colors-custom .main-navigation ul ul { 533 border-color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ). ', 73% ); /* base: #bbb; */534 background: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ). ', 100% ); /* base: #fff; */533 border-color: hsl( ' . $hue . ', ' . $saturation . ', 73% ); /* base: #bbb; */ 534 background: hsl( ' . $hue . ', ' . $saturation . ', 100% ); /* base: #fff; */ 535 535 } 536 536 537 537 .colors-custom .main-navigation ul li.menu-item-has-children:before, 538 538 .colors-custom .main-navigation ul li.page_item_has_children:before { 539 border-bottom-color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ). ', 73% ); /* base: #bbb; */539 border-bottom-color: hsl( ' . $hue . ', ' . $saturation . ', 73% ); /* base: #bbb; */ 540 540 } 541 541 542 542 .colors-custom .main-navigation ul li.menu-item-has-children:after, 543 543 .colors-custom .main-navigation ul li.page_item_has_children:after { 544 border-bottom-color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ). ', 100% ); /* base: #fff; */544 border-bottom-color: hsl( ' . $hue . ', ' . $saturation . ', 100% ); /* base: #fff; */ 545 545 } 546 546 547 547 .colors-custom .main-navigation li li.focus > a, … … 553 553 .colors-custom .main-navigation li li.current-menu-item a:hover, 554 554 .colors-custom .main-navigation li li.current_page_item a:focus, 555 555 .colors-custom .main-navigation li li.current-menu-item a:focus { 556 color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ). ', 100% ); /* base: #fff; */556 color: hsl( ' . $hue . ', ' . $saturation . ', 100% ); /* base: #fff; */ 557 557 } 558 558 }'; 559 559