WordPress.org

Make WordPress Core

Changeset 22099


Ignore:
Timestamp:
10/02/12 23:38:21 (19 months 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.