WordPress.org
Get WordPress

Make WordPress Core

Changeset 22099


Ignore:
Timestamp:
10/02/2012 11:38:21 PM (12 years ago)
Author:
koopersmith
Message:

Refine button styles, notably the gray buttons.

  • Crisper edges, fewer outer shadows.
  • Higher contrast borders on the gray buttons.
  • Separates button-large from button-primary, and removes the regular override class.

props hugobaeta, helenyhou, lessbloat. see #21598.

Location:
trunk/wp-admin
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • trunk/wp-admin/css/colors-classic.css

    r22031 r22099  
    389389input[type=submit] {
    390390    background: #f3f3f3;
    391     background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
    392     background-image: -webkit-linear-gradient(top, #fff, #eee);
    393     background-image:    -moz-linear-gradient(top, #fff, #eee);
    394     background-image:      -o-linear-gradient(top, #fff, #eee);
    395     background-image:   linear-gradient(to bottom, #fff, #eee);
    396     border-color: #ccc;
    397     -webkit-box-shadow: inset 0 0 1px 2px rgba(255,255,255, 0.9);
    398     box-shadow: inset 0 0 1px 2px rgba(255,255,255, 0.9);
    399     color: #464646;
    400     text-shadow: 1px 1px 0 #fff;
     391    background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#f4f4f4));
     392    background-image: -webkit-linear-gradient(top, #fefefe, #f4f4f4);
     393    background-image:    -moz-linear-gradient(top, #fefefe, #f4f4f4);
     394    background-image:      -o-linear-gradient(top, #fefefe, #f4f4f4);
     395    background-image:   linear-gradient(to bottom, #fefefe, #f4f4f4);
     396    border-color: #bbb;
     397    color: #333;
     398    text-shadow: 0 1px 0 #fff;
    401399}
    402400
    … …  
    423421    background-image:      -o-linear-gradient(top, #fff, #f3f3f3);
    424422    background-image:   linear-gradient(to bottom, #fff, #f3f3f3);
    425     border-color: #bbb;
    426     -webkit-box-shadow: inset 0 0 1px 2px #fff, 0px 1px 1px rgba(0,0,0,.1);
    427     box-shadow: inset 0 0 1px 2px #fff, 0px 1px 1px rgba(0,0,0,.1);
    428     color: #000;
     423    border-color: #999;
     424    color: #222;
    429425}
    430426
    … …  
    438434input[type=button]:focus,
    439435input[type=submit]:focus {
    440     border-color: #999;
    441     -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.2);
    442     box-shadow: 1px 1px 1px rgba(0,0,0,.2);
     436    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
     437    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    443438}
    444439
    … …  
    448443.button-secondary:active,
    449444.submit input:active,
     445input[type=button].active,
    450446input[type=button]:active,
    451 input[type=submit].active,
    452447input[type=submit]:active {
    453448    background: #eee;
    454     background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#f9f9f9));
    455     background-image: -webkit-linear-gradient(top, #eee, #f9f9f9);
    456     background-image:    -moz-linear-gradient(top, #eee, #f9f9f9);
    457     background-image:      -o-linear-gradient(top, #eee, #f9f9f9);
    458     background-image:   linear-gradient(to bottom, #eee, #f9f9f9);
    459     border-color: #999 #ddd #ddd #999;
    460     color: #555;
    461     -webkit-box-shadow: inset 1px 1px 0 rgba(50,50,50,0.1);
    462     box-shadow: inset 1px 1px 0 rgba(50,50,50,0.1);
     449    background-image: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#fefefe));
     450    background-image: -webkit-linear-gradient(top, #f4f4f4, #fefefe);
     451    background-image:    -moz-linear-gradient(top, #f4f4f4, #fefefe);
     452    background-image:      -o-linear-gradient(top, #f4f4f4, #fefefe);
     453    background-image:   linear-gradient(to bottom, #f4f4f4, #fefefe);
     454    border-color: #999;
     455    color: #333;
     456    text-shadow: 0 -1px 0 #fff;
     457    -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
     458    box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
     459}
     460
     461.button-disabled,
     462.button[disabled],
     463.button:disabled,
     464.button-secondary[disabled],
     465.button-secondary:disabled,
     466a.button.disabled {
     467    color: #aaa !important;
     468    border-color: #ddd !important;
     469    background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f4f4f4)) !important;
     470    background-image: -webkit-linear-gradient(top, #f9f9f9, #f4f4f4) !important;
     471    background-image:    -moz-linear-gradient(top, #f9f9f9, #f4f4f4) !important;
     472    background-image:      -o-linear-gradient(top, #f9f9f9, #f4f4f4) !important;
     473    background-image:   linear-gradient(to bottom, #f9f9f9, #f4f4f4) !important;
     474    -webkit-box-shadow: none !important;
     475    box-shadow:         none !important;
     476    text-shadow: 0 1px 0 #fff !important;
    463477}
    464478
    … …  
    478492    color: #fff;
    479493    text-decoration: none;
    480     text-shadow: -1px -1px 0 rgba(0,0,0,0.1);
     494    text-shadow: 0 1px 0 rgba(0,0,0,0.1);
    481495}
    482496
    … …  
    496510    background-image:   linear-gradient(to bottom, #2e9fd2, #21759b);
    497511    border-color: #1b607f;
    498     -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 0px 1px 2px rgba(0,0,0,.4);
    499     box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 0px 1px 2px rgba(0,0,0,.4);
     512    -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
     513    box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
    500514    color: #fff;
    501     text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
     515    text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
    502516}
    503517
    … …  
    507521a.button-primary:focus {
    508522    border-color: #0e3950;
    509     -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,.4);
    510     box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,.4);
     523    -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 0 1px 2px rgba(0,0,0,0.1);
     524    box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 0 1px 2px rgba(0,0,0,0.1);
    511525}
    512526
    … …  
    521535    background-image:      -o-linear-gradient(top, #21759b, #278ab7);
    522536    background-image:   linear-gradient(to bottom, #21759b, #278ab7);
    523     border-color: #124560 #2382ae #2382ae #124560;
     537    border-color: #124560 #2382ae #2382ae #2382ae;
    524538    color: rgba(255,255,255,0.95);
    525     -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,0.1);
    526     box-shadow: inset 1px 1px 0 rgba(0,0,0,0.1);
    527 }
    528 
    529 .button-disabled,
    530 .button[disabled],
    531 .button:disabled,
    532 .button-secondary[disabled],
    533 .button-secondary:disabled,
    534 a.button.disabled {
    535     color: #aaa !important;
    536     border-color: #ddd !important;
    537     -webkit-box-shadow: none !important;
    538     box-shadow:         none !important;
     539    -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
     540    box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
     541    text-shadow: 0 1px 0 rgba(0,0,0,0.1);
    539542}
    540543
    … …  
    544547    color: #94cde7 !important;
    545548    background: #298cba !important;
     549    border-color: #1b607f !important;
    546550    -webkit-box-shadow: none !important;
    547551    box-shadow:         none !important;
     552    text-shadow: 0 -1px 0 rgba(0,0,0,0.1) !important;
    548553}
    549554

  • trunk/wp-admin/css/colors-fresh.css

    r22031 r22099  
    380380input[type=submit] {
    381381    background: #f3f3f3;
    382     background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
    383     background-image: -webkit-linear-gradient(top, #fff, #eee);
    384     background-image:    -moz-linear-gradient(top, #fff, #eee);
    385     background-image:      -o-linear-gradient(top, #fff, #eee);
    386     background-image:   linear-gradient(to bottom, #fff, #eee);
    387     border-color: #ccc;
    388     -webkit-box-shadow: inset 0 0 1px 2px rgba(255,255,255, 0.9);
    389     box-shadow: inset 0 0 1px 2px rgba(255,255,255, 0.9);
    390     color: #464646;
    391     text-shadow: 1px 1px 0 #fff;
     382    background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#f4f4f4));
     383    background-image: -webkit-linear-gradient(top, #fefefe, #f4f4f4);
     384    background-image:    -moz-linear-gradient(top, #fefefe, #f4f4f4);
     385    background-image:      -o-linear-gradient(top, #fefefe, #f4f4f4);
     386    background-image:   linear-gradient(to bottom, #fefefe, #f4f4f4);
     387    border-color: #bbb;
     388    color: #333;
     389    text-shadow: 0 1px 0 #fff;
    392390}
    393391
    … …  
    414412    background-image:      -o-linear-gradient(top, #fff, #f3f3f3);
    415413    background-image:   linear-gradient(to bottom, #fff, #f3f3f3);
    416     border-color: #bbb;
    417     -webkit-box-shadow: inset 0 0 1px 2px #fff, 0px 1px 1px rgba(0,0,0,.1);
    418     box-shadow: inset 0 0 1px 2px #fff, 0px 1px 1px rgba(0,0,0,.1);
    419     color: #000;
     414    border-color: #999;
     415    color: #222;
    420416}
    421417
    … …  
    429425input[type=button]:focus,
    430426input[type=submit]:focus {
    431     border-color: #999;
    432     -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.2);
    433     box-shadow: 1px 1px 1px rgba(0,0,0,.2);
     427    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
     428    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    434429}
    435430
    … …  
    443438input[type=submit]:active {
    444439    background: #eee;
    445     background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#f9f9f9));
    446     background-image: -webkit-linear-gradient(top, #eee, #f9f9f9);
    447     background-image:    -moz-linear-gradient(top, #eee, #f9f9f9);
    448     background-image:      -o-linear-gradient(top, #eee, #f9f9f9);
    449     background-image:   linear-gradient(to bottom, #eee, #f9f9f9);
    450     border-color: #999 #ddd #ddd #999;
    451     color: #555;
    452     -webkit-box-shadow: inset 1px 1px 0 rgba(50,50,50,0.1);
    453     box-shadow: inset 1px 1px 0 rgba(50,50,50,0.1);
     440    background-image: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#fefefe));
     441    background-image: -webkit-linear-gradient(top, #f4f4f4, #fefefe);
     442    background-image:    -moz-linear-gradient(top, #f4f4f4, #fefefe);
     443    background-image:      -o-linear-gradient(top, #f4f4f4, #fefefe);
     444    background-image:   linear-gradient(to bottom, #f4f4f4, #fefefe);
     445    border-color: #999;
     446    color: #333;
     447    text-shadow: 0 -1px 0 #fff;
     448    -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
     449    box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
     450}
     451
     452.button-disabled,
     453.button[disabled],
     454.button:disabled,
     455.button-secondary[disabled],
     456.button-secondary:disabled,
     457a.button.disabled {
     458    color: #aaa !important;
     459    border-color: #ddd !important;
     460    background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f4f4f4)) !important;
     461    background-image: -webkit-linear-gradient(top, #f9f9f9, #f4f4f4) !important;
     462    background-image:    -moz-linear-gradient(top, #f9f9f9, #f4f4f4) !important;
     463    background-image:      -o-linear-gradient(top, #f9f9f9, #f4f4f4) !important;
     464    background-image:   linear-gradient(to bottom, #f9f9f9, #f4f4f4) !important;
     465    -webkit-box-shadow: none !important;
     466    box-shadow:         none !important;
     467    text-shadow: 0 1px 0 #fff !important;
    454468}
    455469
    … …  
    469483    color: #fff;
    470484    text-decoration: none;
    471     text-shadow: -1px -1px 0 rgba(0,0,0,0.1);
     485    text-shadow: 0 1px 0 rgba(0,0,0,0.1);
    472486}
    473487
    … …  
    487501    background-image:   linear-gradient(to bottom, #2e9fd2, #21759b);
    488502    border-color: #1b607f;
    489     -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 0 1px 1px rgba(0,0,0,.3);
    490     box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 0 1px 1px rgba(0,0,0,.3);
     503    -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
     504    box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
    491505    color: #fff;
    492     text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
     506    text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
    493507}
    494508
    … …  
    498512a.button-primary:focus {
    499513    border-color: #0e3950;
    500     -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,.4);
    501     box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,.4);
     514    -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 0 1px 2px rgba(0,0,0,0.1);
     515    box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 0 1px 2px rgba(0,0,0,0.1);
    502516}
    503517
    … …  
    512526    background-image:      -o-linear-gradient(top, #21759b, #278ab7);
    513527    background-image:   linear-gradient(to bottom, #21759b, #278ab7);
    514     border-color: #124560 #2382ae #2382ae #124560;
     528    border-color: #124560 #2382ae #2382ae #2382ae;
    515529    color: rgba(255,255,255,0.95);
    516     -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,0.1);
    517     box-shadow: inset 1px 1px 0 rgba(0,0,0,0.1);
    518 }
    519 
    520 .button-disabled,
    521 .button[disabled],
    522 .button:disabled,
    523 .button-secondary[disabled],
    524 .button-secondary:disabled,
    525 a.button.disabled {
    526     color: #aaa !important;
    527     border-color: #ddd !important;
    528     -webkit-box-shadow: none !important;
    529     box-shadow:         none !important;
     530    -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
     531    box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
     532    text-shadow: 0 1px 0 rgba(0,0,0,0.1);
    530533}
    531534
    … …  
    535538    color: #94cde7 !important;
    536539    background: #298cba !important;
     540    border-color: #1b607f !important;
    537541    -webkit-box-shadow: none !important;
    538542    box-shadow:         none !important;
     543    text-shadow: 0 -1px 0 rgba(0,0,0,0.1) !important;
    539544}
    540545

  • trunk/wp-admin/css/wp-admin.css

    r22072 r22099  
    784784    height: 15px;
    785785    margin: 0;
    786     padding: 0.25em 0.8em 0.35em;
     786    padding: 0.25em 0.85em 0.35em;
    787787    cursor: pointer;
    788788    border-width: 1px;
    … …  
    796796}
    797797
    798 .button.button-large,
    799 .button.button-primary {
    800     padding: 0.4em 0.8em 0.5em;
     798.button.button-large {
     799    padding: 0.4em 1.0em 0.5em;
    801800}
    802801
    803802.button.button-small {
    804     padding: 0.15em 0.8em 0.17em;
    805 }
    806 
    807 .button.regular {
    808     padding: 0.25em 0.8em 0.35em !important;
     803    padding: 0.15em 0.75em 0.17em;
    809804}
    810805

  • trunk/wp-admin/includes/template.php

    r22091 r22099  
    16011601 *                     string such as 'tabindex="1"', though the array format is typically cleaner.
    16021602 */
    1603 function get_submit_button( $text = null, $type = 'primary', $name = 'submit', $wrap = true, $other_attributes = null ) {
     1603function get_submit_button( $text = null, $type = 'primary large', $name = 'submit', $wrap = true, $other_attributes = null ) {
    16041604    if ( ! is_array( $type ) )
    1605         $type = explode( ' ', $type ); 
     1605        $type = explode( ' ', $type );
    16061606
    16071607    $button_shorthand = array( 'primary', 'small', 'large' );
Note: See TracChangeset for help on using the changeset viewer.