WordPress.org

Make WordPress Core

Changeset 44195


Ignore:
Timestamp:
12/14/2018 09:13:56 PM (9 months ago)
Author:
laurelfulford
Message:

Twenty Thirteen: Fix button block custom colors.

Simplify some of the button block’s CSS selectors in the theme, to make sure the default colors don’t override the custom colors on the front end.

Also make sure the button’s gradient is not applied when a custom background color is added, since it will hide it.

Fixes #45431.

Location:
branches/5.0/src/wp-content/themes/twentythirteen/css
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • branches/5.0/src/wp-content/themes/twentythirteen/css/blocks.css

    r43872 r44195  
    337337
    338338.wp-block-button .wp-block-button__link {
    339     background: #e05d22; /* Old browsers */
    340     background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome 10+, Safari 5.1+ */
    341     background:   linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */
    342339    border: none;
    343340    border-bottom: 3px solid #b93207;
    344341    border-radius: 2px;
    345     color: #fff;
    346342    display: inline-block;
    347343    font-size: 16px;
     
    350346}
    351347
    352 .wp-block-button .wp-block-button__link:hover,
    353 .wp-block-button .wp-block-button__link:focus {
    354     background: #ed6a31; /* Old browsers */
     348.entry-content .wp-block-button__link {
     349    background-color: #e05d22;
     350    color: #fff;
     351}
     352
     353.entry-content .wp-block-button__link:not(.has-background) {
     354    background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome 10+, Safari 5.1+ */
     355    background:   linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */
     356}
     357
     358.entry-content .wp-block-button__link:hover,
     359.entry-content .wp-block-button__link:focus {
     360    background: #ed6a31;
     361    color: #fff;
     362}
     363
     364.entry-content .wp-block-button__link:not(.has-background):hover,
     365.entry-content .wp-block-button__link:not(.has-background):hover {
    355366    background: -webkit-linear-gradient(top, #ed6a31 0%, #e55627 100%); /* Chrome 10+, Safari 5.1+ */
    356367    background: linear-gradient(to bottom, #ed6a31 0%, #e55627 100%); /* W3C */
    357     color: #fff;
    358     outline: none;
    359 }
    360 
    361 .wp-block-button .wp-block-button__link:active {
    362     background: #d94412; /* Old browsers */
     368}
     369
     370.entry-content .wp-block-button__link:active {
     371    background: #d94412;
     372}
     373
     374.entry-content .wp-block-button__link:not(.has-background):active {
    363375    background: -webkit-linear-gradient(top, #d94412 0%, #e05d22 100%); /* Chrome 10+, Safari 5.1+ */
    364376    background:   linear-gradient(to bottom, #d94412 0%, #e05d22 100%); /* W3C */
     377}
     378
     379.entry-content .wp-block-button .wp-block-button__link:active {
    365380    border: none;
    366381    border-top: 3px solid #b93207;
     
    438453--------------------------------------------------------------*/
    439454
    440 .has-dark-gray-color {
     455.entry-content .has-dark-gray-color {
    441456    color: #141412;
    442457}
    443458
    444 .has-dark-gray-background-color {
     459.entry-content .has-dark-gray-background-color {
    445460    background-color: #141412;
    446461}
    447462
    448 .has-red-color {
     463.entry-content .has-red-color {
    449464    color: #bc360a;
    450465}
    451466
    452 .has-red-background-color {
     467.entry-content .has-red-background-color {
    453468    background-color: #bc360a;
    454469}
    455470
    456 .has-medium-orange-color {
     471.entry-content .has-medium-orange-color {
    457472    color: #db572f;
    458473}
    459474
    460 .has-medium-orange-background-color {
     475.entry-content .has-medium-orange-background-color {
    461476    background-color: #db572f;
    462477}
    463478
    464 .has-light-orange-color {
     479.entry-content .has-light-orange-color {
    465480    color: #ea9629;
    466481}
    467482
    468 .has-light-orange-background-color {
     483.entry-content .has-light-orange-background-color {
    469484    background-color: #ea9629;
    470485}
    471486
    472 .has-yellow-color {
     487.entry-content .has-yellow-color {
    473488    color: #fbca3c;
    474489}
    475490
    476 .has-yellow-background-color {
     491.entry-content .has-yellow-background-color {
    477492    background-color: #fbca3c;
    478493}
    479494
    480 .has-white-color {
     495.entry-content .has-white-color {
    481496    color: #fff;
    482497}
    483498
    484 .has-white-background-color {
     499.entry-content .has-white-background-color {
    485500    background-color: #fff;
    486501}
    487502
    488 .has-dark-brown-color {
     503.entry-content .has-dark-brown-color {
    489504    color: #220e10;
    490505}
    491506
    492 .has-dark-brown-background-color {
     507.entry-content .has-dark-brown-background-color {
    493508    background-color: #220e10;
    494509}
    495510
    496 .has-medium-brown-color {
     511.entry-content .has-medium-brown-color {
    497512    color: #722d19;
    498513}
    499514
    500 .has-medium-brown-background-color {
     515.entry-content .has-medium-brown-background-color {
    501516    background-color: #722d19;
    502517}
    503518
    504 .has-light-brown-color {
     519.entry-content .has-light-brown-color {
    505520    color: #eadaa6;
    506521}
    507522
    508 .has-light-brown-background-color {
     523.entry-content .has-light-brown-background-color {
    509524    background-color: #eadaa6;
    510525}
    511526
    512 .has-beige-color {
     527.entry-content .has-beige-color {
    513528    color: #e8e5ce;
    514529}
    515530
    516 .has-brown-background-color {
     531.entry-content .has-beige-background-color {
    517532    background-color: #e8e5ce;
    518533}
    519534
    520 .has-off-white-color {
     535.entry-content .has-off-white-color {
    521536    color: #f7f5e7;
    522537}
    523538
    524 .has-off-white-background-color {
     539.entry-content .has-off-white-background-color {
    525540    background-color: #f7f5e7;
    526541}
  • branches/5.0/src/wp-content/themes/twentythirteen/css/editor-blocks.css

    r43872 r44195  
    327327
    328328.wp-block-button .wp-block-button__link {
    329     background: #e05d22; /* Old browsers */
    330     background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome 10+, Safari 5.1+ */
    331     background: linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */
     329    background: #e05d22;
    332330    border: none;
    333331    border-bottom: 3px solid #b93207;
     
    341339}
    342340
     341.wp-block-button__link:not(.has-background) {
     342    background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome 10+, Safari 5.1+ */
     343    background: linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */
     344}
     345
    343346/* Separator */
    344347
Note: See TracChangeset for help on using the changeset viewer.