WordPress.org
Get WordPress

Make WordPress Core

Ticket #31459: update-admin-buttons-review-2.diff

File update-admin-buttons-review-2.diff, 7.6 KB (added by hugobaeta, 8 years ago)

Update buttons style, including tweaks for color schemes, and update to press this split button

  • src/wp-admin/css/colors/_mixins.scss

     
    44 */
    55@mixin button( $button-color, $text-color: white ) {
    66        background: $button-color;
    7         border-color: darken( $button-color, 10% );
     7        border-color: darken( $button-color, 8% ) darken( $button-color, 10% ) darken( $button-color, 10% );
    88        color: $text-color;
    9         box-shadow: inset 0 1px 0 lighten( $button-color, 15% ), 0 1px 0 rgba(0,0,0,.15);
     9        box-shadow: 0 1px 0 darken( $button-color, 10% );
     10        text-shadow: 0 -1px 1px darken( $button-color, 12% ),
     11                1px 0 1px darken( $button-color, 12% ),
     12                0 1px 1px darken( $button-color, 12% ),
     13                -1px 0 1px darken( $button-color, 12% );
    1014
    1115        &:hover,
    1216        &:focus {
    13                 background: darken( $button-color, 5% );
     17                background: lighten( $button-color, 3% );
    1418                border-color: darken( $button-color, 15% );
    1519                color: $text-color;
    16                 box-shadow: inset 0 1px 0 lighten( $button-color, 10% );
     20                box-shadow: 0 1px 0 darken( $button-color, 15% );
    1721        }
    1822
    1923        &:focus {
    20                 box-shadow: inset 0 1px 0 lighten( $button-color, 10% ),
    21                             0 0 0 1px #5b9dd9,
    22                             0 0 2px 1px rgba( 30, 140, 190, .8 );
     24                box-shadow: inset 0 1px 0 darken( $button-color, 10% ),
     25                                        0 0 2px 1px #33b3db;
    2326        }
    2427
    2528        &:active {
    2629                background: darken( $button-color, 10% );
    2730                border-color: darken( $button-color, 15% );
    28                 color: $text-color;
    29                 box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ),
    30                             0 0 0 1px #5b9dd9,
    31                             0 0 2px 1px rgba( 30, 140, 190, .8 );
     31                color: hsl( hue( $button-color ), 50%, 80% );
     32                box-shadow: inset 0 2px 0 darken( $button-color, 15% );
    3233        }
    3334
    3435        &[disabled],

  • src/wp-admin/css/press-this.css

     
    462462        -webkit-appearance: none;
    463463        line-height: 2;
    464464        padding: 0 10px 1px;
    465         background: #00a0d2;
    466         border-color: #0073aa;
     465        background: #0085ba;
     466        border-color: #0085ba #0073aa #0073aa;
    467467        border-width: 1px;
    468468        border-style: solid;
    469         -webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5), 0 1px 0 rgba( 0, 0, 0, 0.15 );
    470         box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5 ), 0 1px 0 rgba( 0, 0, 0, 0.15 );
     469        -webkit-box-shadow: 0 1px 0 #0073aa;
     470        box-shadow: 0 1px 0 #0073aa;
    471471        color: #fff;
    472472}
    473473
    … …  
    486486        border-top-right-radius: 3px;
    487487        -webkit-border-bottom-right-radius: 3px;
    488488        border-bottom-right-radius: 3px;
    489         border-left: 0 none;
     489        border-left: 1px solid #006799;
    490490        float: right;
    491491}
    492492
    493493.split-button-toggle i {
    494494        margin: 4px 20px 3px 0;
    495495        padding: 0 10px;
    496         border-left: 1px solid #fff;
    497496}
    498497
    499498.split-button-primary:hover,
    500499.split-button-toggle:hover {
    501500        outline: none;
    502         background: #0091cd;
    503         border-color: #0073aa;
     501        background: #008ec2;
     502        border-color: #006799;
    504503}
    505504
    506505.split-button-primary:focus,
    507506.split-button-toggle:focus {
    508507        outline: none;
    509         border-color: #0e3950;
    510         -webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 ),
    511                 0 0 0 1px #5b9dd9,
    512                 0 0 2px 1px rgba(30, 140, 190, .8);
    513         box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 ),
    514                 0 0 0 1px #5b9dd9,
    515                 0 0 2px 1px rgba(30, 140, 190, .8);
     508        -webkit-box-shadow: 0 1px 0 #0073aa,
     509                0 0 2px 1px #33b3db;
     510        box-shadow: 0 1px 0 #0073aa,
     511                0 0 2px 1px #33b3db;
    516512}
    517513
    518514.split-button-primary:active,
    519515.split-button-toggle:active {
    520516        background: #0073aa;
    521         border-color: #005082;
     517        border-color: #006799;
    522518        color: rgba( 255, 255, 255, 0.95 );
    523         -webkit-box-shadow: inset 0 1px 0 rgba( 0, 0, 0, 0.1 );
    524         box-shadow: inset 0 1px 0 rgba( 0, 0, 0, 0.1 );
     519        -webkit-box-shadow: inset 0 2px 0 #006799;
     520        box-shadow: inset 0 2px 0 #006799;
     521        transform: translateY(1px);
    525522}
    526523
    527524/**
    … …  
    14381435
    14391436.scan-submit:hover,
    14401437.scan-submit:focus {
    1441         background: #2991b7;
    1442         border-color: #20708e;
     1438        background: #008ec2;
     1439        border-color: #006799;
    14431440        color: #fff;
    14441441        outline: 0;
    14451442}
    14461443
    14471444.scan-submit:active {
    1448         background: #2581a2;
    1449         border-color: #20708e;
     1445        background: #0073aa;
     1446        border-color: #006799;
    14501447        color: #fff;
    14511448}
    14521449

  • src/wp-includes/css/buttons.css

     
    131131        color: #555;
    132132        border-color: #cccccc;
    133133        background: #f7f7f7;
    134         -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 );
    135         box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 );
     134        -webkit-box-shadow: 0 1px 0 #cccccc;
     135        box-shadow: 0 1px 0 #cccccc;
    136136        vertical-align: top;
    137137}
    138138
    … …  
    164164.wp-core-ui .button-link:focus {
    165165        -webkit-box-shadow:
    166166                0 0 0 1px #5b9dd9,
    167                 0 0 2px 1px rgba(30, 140, 190, .8);
     167                0 0 2px 1px rgba(0, 115, 170, .8);
    168168        box-shadow:
    169169                0 0 0 1px #5b9dd9,
    170                 0 0 2px 1px rgba(30, 140, 190, .8);
     170                0 0 2px 1px rgba(0, 115, 170, .8);
    171171}
    172172
    173173.wp-core-ui .button.active,
    … …  
    179179        color: #32373c;
    180180        -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
    181181        box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
     182        transform: translateY(1px);
    182183}
    183184
    184185.wp-core-ui .button.active:focus {
    185186        -webkit-box-shadow:
    186187                inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ),
    187188                0 0 0 1px #5b9dd9,
    188                 0 0 2px 1px rgba(30, 140, 190, .8);
     189                0 0 2px 1px rgba(0, 115, 170, .8);
    189190        box-shadow:
    190191                inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ),
    191192                0 0 0 1px #5b9dd9,
    192                 0 0 2px 1px rgba(30, 140, 190, .8);
     193                0 0 2px 1px rgba(0, 115, 170, .8);
    193194}
    194195
    195196.wp-core-ui .button[disabled],
    … …  
    213214---------------------------------------------------------------------------- */
    214215
    215216.wp-core-ui .button-primary {
    216         background: #00a0d2;
    217         border-color: #0073aa;
    218         -webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5), 0 1px 0 rgba( 0, 0, 0, 0.15 );
    219         box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5 ), 0 1px 0 rgba( 0, 0, 0, 0.15 );
     217        background: #0085ba;
     218        border-color: #0085ba #0073aa #0073aa;
     219        -webkit-box-shadow: 0 1px 0 #0073aa;
     220        box-shadow: 0 1px 0 #0073aa;
    220221        color: #fff;
    221222        text-decoration: none;
     223        text-shadow: 0 -1px 1px #006799,
     224                1px 0 1px #006799,
     225                0 1px 1px #006799,
     226                -1px 0 1px #006799;
    222227}
    223228
    224229.wp-core-ui .button-primary.hover,
    225230.wp-core-ui .button-primary:hover,
    226231.wp-core-ui .button-primary.focus,
    227232.wp-core-ui .button-primary:focus {
    228         background: #0091cd;
    229         border-color: #0073aa;
    230         -webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 );
    231         box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 );
     233        background: #008ec2;
     234        border-color: #006799;
     235        -webkit-box-shadow: 0 1px 0 #006799;
     236        box-shadow: 0 1px 0 #006799;
    232237        color: #fff;
    233238}
    234239
    235240.wp-core-ui .button-primary.focus,
    236241.wp-core-ui .button-primary:focus {
    237         border-color: #0e3950;
    238         -webkit-box-shadow:
    239                 inset 0 1px 0 rgba( 120, 200, 230, 0.6 ),
    240                 0 0 0 1px #5b9dd9,
    241                 0 0 2px 1px rgba(30, 140, 190, .8);
    242         box-shadow:
    243                 inset 0 1px 0 rgba( 120, 200, 230, 0.6 ),
    244                 0 0 0 1px #5b9dd9,
    245                 0 0 2px 1px rgba(30, 140, 190, .8);
     242        -webkit-box-shadow: 0 1px 0 #0073aa,
     243                0 0 2px 1px #33b3db;
     244        box-shadow: 0 1px 0 #0073aa,
     245                0 0 2px 1px #33b3db;
    246246}
    247247
    248248.wp-core-ui .button-primary.active,
    … …  
    250250.wp-core-ui .button-primary.active:focus,
    251251.wp-core-ui .button-primary:active {
    252252        background: #0073aa;
    253         border-color: #005082;
    254         color: rgba( 255, 255, 255, 0.95 );
    255         -webkit-box-shadow: inset 0 1px 0 rgba( 0, 0, 0, 0.1 );
    256         box-shadow: inset 0 1px 0 rgba( 0, 0, 0, 0.1 );
     253        border-color: #006799;
     254        -webkit-box-shadow: inset 0 2px 0 #006799;
     255        box-shadow: inset 0 2px 0 #006799;
     256        color: rgba( 255, 255, 255, 0.95 );
    257257        vertical-align: top;
    258258}
    259259