From a918ec9135aa03d317a733f341449aaade225bf8 Mon Sep 17 00:00:00 2001 From: Daryl Koopersmith Date: Tue, 2 Oct 2012 23:38:21 +0000 Subject: [PATCH] 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. git-svn-id: http://core.svn.wordpress.org/trunk@22099 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- wp-admin/css/colors-classic.css | 101 +++++++++++++++++--------------- wp-admin/css/colors-fresh.css | 99 ++++++++++++++++--------------- wp-admin/css/wp-admin.css | 13 ++-- wp-admin/includes/template.php | 4 +- 4 files changed, 111 insertions(+), 106 deletions(-) diff --git a/wp-admin/css/colors-classic.css b/wp-admin/css/colors-classic.css index dff2b6be22..49e6068755 100644 --- a/wp-admin/css/colors-classic.css +++ b/wp-admin/css/colors-classic.css @@ -388,16 +388,14 @@ a.button:active { input[type=button], input[type=submit] { background: #f3f3f3; - background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee)); - background-image: -webkit-linear-gradient(top, #fff, #eee); - background-image: -moz-linear-gradient(top, #fff, #eee); - background-image: -o-linear-gradient(top, #fff, #eee); - background-image: linear-gradient(to bottom, #fff, #eee); - border-color: #ccc; - -webkit-box-shadow: inset 0 0 1px 2px rgba(255,255,255, 0.9); - box-shadow: inset 0 0 1px 2px rgba(255,255,255, 0.9); - color: #464646; - text-shadow: 1px 1px 0 #fff; + background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#f4f4f4)); + background-image: -webkit-linear-gradient(top, #fefefe, #f4f4f4); + background-image: -moz-linear-gradient(top, #fefefe, #f4f4f4); + background-image: -o-linear-gradient(top, #fefefe, #f4f4f4); + background-image: linear-gradient(to bottom, #fefefe, #f4f4f4); + border-color: #bbb; + color: #333; + text-shadow: 0 1px 0 #fff; } .button.hover, @@ -422,10 +420,8 @@ input[type=submit]:focus { background-image: -moz-linear-gradient(top, #fff, #f3f3f3); background-image: -o-linear-gradient(top, #fff, #f3f3f3); background-image: linear-gradient(to bottom, #fff, #f3f3f3); - border-color: #bbb; - -webkit-box-shadow: inset 0 0 1px 2px #fff, 0px 1px 1px rgba(0,0,0,.1); - box-shadow: inset 0 0 1px 2px #fff, 0px 1px 1px rgba(0,0,0,.1); - color: #000; + border-color: #999; + color: #222; } .button.focus, @@ -437,9 +433,8 @@ input[type=submit]:focus { input[type=button].focus, input[type=button]:focus, input[type=submit]:focus { - border-color: #999; - -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.2); - box-shadow: 1px 1px 1px rgba(0,0,0,.2); + -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1); + box-shadow: 0 1px 2px rgba(0,0,0,0.1); } .button.active, @@ -447,19 +442,38 @@ input[type=submit]:focus { .button-secondary.active, .button-secondary:active, .submit input:active, +input[type=button].active, input[type=button]:active, -input[type=submit].active, input[type=submit]:active { background: #eee; - background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#f9f9f9)); - background-image: -webkit-linear-gradient(top, #eee, #f9f9f9); - background-image: -moz-linear-gradient(top, #eee, #f9f9f9); - background-image: -o-linear-gradient(top, #eee, #f9f9f9); - background-image: linear-gradient(to bottom, #eee, #f9f9f9); - border-color: #999 #ddd #ddd #999; - color: #555; - -webkit-box-shadow: inset 1px 1px 0 rgba(50,50,50,0.1); - box-shadow: inset 1px 1px 0 rgba(50,50,50,0.1); + background-image: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#fefefe)); + background-image: -webkit-linear-gradient(top, #f4f4f4, #fefefe); + background-image: -moz-linear-gradient(top, #f4f4f4, #fefefe); + background-image: -o-linear-gradient(top, #f4f4f4, #fefefe); + background-image: linear-gradient(to bottom, #f4f4f4, #fefefe); + border-color: #999; + color: #333; + text-shadow: 0 -1px 0 #fff; + -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ); + box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ); +} + +.button-disabled, +.button[disabled], +.button:disabled, +.button-secondary[disabled], +.button-secondary:disabled, +a.button.disabled { + color: #aaa !important; + border-color: #ddd !important; + background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f4f4f4)) !important; + background-image: -webkit-linear-gradient(top, #f9f9f9, #f4f4f4) !important; + background-image: -moz-linear-gradient(top, #f9f9f9, #f4f4f4) !important; + background-image: -o-linear-gradient(top, #f9f9f9, #f4f4f4) !important; + background-image: linear-gradient(to bottom, #f9f9f9, #f4f4f4) !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; + text-shadow: 0 1px 0 #fff !important; } input.button-primary, @@ -477,7 +491,7 @@ a.button-primary { box-shadow: inset 0 1px 0 rgba(120,200,230,0.5); color: #fff; text-decoration: none; - text-shadow: -1px -1px 0 rgba(0,0,0,0.1); + text-shadow: 0 1px 0 rgba(0,0,0,0.1); } input.button-primary.hover, @@ -495,10 +509,10 @@ a.button-primary:focus { background-image: -o-linear-gradient(top, #2e9fd2, #21759b); background-image: linear-gradient(to bottom, #2e9fd2, #21759b); border-color: #1b607f; - -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 0px 1px 2px rgba(0,0,0,.4); - box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 0px 1px 2px rgba(0,0,0,.4); + -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6); + box-shadow: inset 0 1px 0 rgba(120,200,230,0.6); color: #fff; - text-shadow: -1px -1px 0 rgba(0,0,0,0.3); + text-shadow: 0 -1px 0 rgba(0,0,0,0.3); } input.button-primary.focus, @@ -506,8 +520,8 @@ input.button-primary:focus, button.button-primary:focus, a.button-primary:focus { border-color: #0e3950; - -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,.4); - box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,.4); + -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 0 1px 2px rgba(0,0,0,0.1); + box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 0 1px 2px rgba(0,0,0,0.1); } input.button-primary.active, @@ -520,22 +534,11 @@ a.button-primary:active { background-image: -moz-linear-gradient(top, #21759b, #278ab7); background-image: -o-linear-gradient(top, #21759b, #278ab7); background-image: linear-gradient(to bottom, #21759b, #278ab7); - border-color: #124560 #2382ae #2382ae #124560; + border-color: #124560 #2382ae #2382ae #2382ae; color: rgba(255,255,255,0.95); - -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,0.1); - box-shadow: inset 1px 1px 0 rgba(0,0,0,0.1); -} - -.button-disabled, -.button[disabled], -.button:disabled, -.button-secondary[disabled], -.button-secondary:disabled, -a.button.disabled { - color: #aaa !important; - border-color: #ddd !important; - -webkit-box-shadow: none !important; - box-shadow: none !important; + -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1); + box-shadow: inset 0 1px 0 rgba(0,0,0,0.1); + text-shadow: 0 1px 0 rgba(0,0,0,0.1); } .button-primary-disabled, @@ -543,8 +546,10 @@ a.button.disabled { .button-primary:disabled { color: #94cde7 !important; background: #298cba !important; + border-color: #1b607f !important; -webkit-box-shadow: none !important; box-shadow: none !important; + text-shadow: 0 -1px 0 rgba(0,0,0,0.1) !important; } .button-primary-disabled:hover, diff --git a/wp-admin/css/colors-fresh.css b/wp-admin/css/colors-fresh.css index fd459a4438..adf26c4600 100644 --- a/wp-admin/css/colors-fresh.css +++ b/wp-admin/css/colors-fresh.css @@ -379,16 +379,14 @@ a.button:active { input[type=button], input[type=submit] { background: #f3f3f3; - background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee)); - background-image: -webkit-linear-gradient(top, #fff, #eee); - background-image: -moz-linear-gradient(top, #fff, #eee); - background-image: -o-linear-gradient(top, #fff, #eee); - background-image: linear-gradient(to bottom, #fff, #eee); - border-color: #ccc; - -webkit-box-shadow: inset 0 0 1px 2px rgba(255,255,255, 0.9); - box-shadow: inset 0 0 1px 2px rgba(255,255,255, 0.9); - color: #464646; - text-shadow: 1px 1px 0 #fff; + background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#f4f4f4)); + background-image: -webkit-linear-gradient(top, #fefefe, #f4f4f4); + background-image: -moz-linear-gradient(top, #fefefe, #f4f4f4); + background-image: -o-linear-gradient(top, #fefefe, #f4f4f4); + background-image: linear-gradient(to bottom, #fefefe, #f4f4f4); + border-color: #bbb; + color: #333; + text-shadow: 0 1px 0 #fff; } .button.hover, @@ -413,10 +411,8 @@ input[type=submit]:focus { background-image: -moz-linear-gradient(top, #fff, #f3f3f3); background-image: -o-linear-gradient(top, #fff, #f3f3f3); background-image: linear-gradient(to bottom, #fff, #f3f3f3); - border-color: #bbb; - -webkit-box-shadow: inset 0 0 1px 2px #fff, 0px 1px 1px rgba(0,0,0,.1); - box-shadow: inset 0 0 1px 2px #fff, 0px 1px 1px rgba(0,0,0,.1); - color: #000; + border-color: #999; + color: #222; } .button.focus, @@ -428,9 +424,8 @@ input[type=submit]:focus { input[type=button].focus, input[type=button]:focus, input[type=submit]:focus { - border-color: #999; - -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.2); - box-shadow: 1px 1px 1px rgba(0,0,0,.2); + -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1); + box-shadow: 0 1px 2px rgba(0,0,0,0.1); } .button.active, @@ -442,15 +437,34 @@ input[type=button].active, input[type=button]:active, input[type=submit]:active { background: #eee; - background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#f9f9f9)); - background-image: -webkit-linear-gradient(top, #eee, #f9f9f9); - background-image: -moz-linear-gradient(top, #eee, #f9f9f9); - background-image: -o-linear-gradient(top, #eee, #f9f9f9); - background-image: linear-gradient(to bottom, #eee, #f9f9f9); - border-color: #999 #ddd #ddd #999; - color: #555; - -webkit-box-shadow: inset 1px 1px 0 rgba(50,50,50,0.1); - box-shadow: inset 1px 1px 0 rgba(50,50,50,0.1); + background-image: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#fefefe)); + background-image: -webkit-linear-gradient(top, #f4f4f4, #fefefe); + background-image: -moz-linear-gradient(top, #f4f4f4, #fefefe); + background-image: -o-linear-gradient(top, #f4f4f4, #fefefe); + background-image: linear-gradient(to bottom, #f4f4f4, #fefefe); + border-color: #999; + color: #333; + text-shadow: 0 -1px 0 #fff; + -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ); + box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ); +} + +.button-disabled, +.button[disabled], +.button:disabled, +.button-secondary[disabled], +.button-secondary:disabled, +a.button.disabled { + color: #aaa !important; + border-color: #ddd !important; + background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f4f4f4)) !important; + background-image: -webkit-linear-gradient(top, #f9f9f9, #f4f4f4) !important; + background-image: -moz-linear-gradient(top, #f9f9f9, #f4f4f4) !important; + background-image: -o-linear-gradient(top, #f9f9f9, #f4f4f4) !important; + background-image: linear-gradient(to bottom, #f9f9f9, #f4f4f4) !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; + text-shadow: 0 1px 0 #fff !important; } input.button-primary, @@ -468,7 +482,7 @@ a.button-primary { box-shadow: inset 0 1px 0 rgba(120,200,230,0.5); color: #fff; text-decoration: none; - text-shadow: -1px -1px 0 rgba(0,0,0,0.1); + text-shadow: 0 1px 0 rgba(0,0,0,0.1); } input.button-primary.hover, @@ -486,10 +500,10 @@ a.button-primary:focus { background-image: -o-linear-gradient(top, #2e9fd2, #21759b); background-image: linear-gradient(to bottom, #2e9fd2, #21759b); border-color: #1b607f; - -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 0 1px 1px rgba(0,0,0,.3); - box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 0 1px 1px rgba(0,0,0,.3); + -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6); + box-shadow: inset 0 1px 0 rgba(120,200,230,0.6); color: #fff; - text-shadow: -1px -1px 0 rgba(0,0,0,0.3); + text-shadow: 0 -1px 0 rgba(0,0,0,0.3); } input.button-primary.focus, @@ -497,8 +511,8 @@ input.button-primary:focus, button.button-primary:focus, a.button-primary:focus { border-color: #0e3950; - -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,.4); - box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,.4); + -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 0 1px 2px rgba(0,0,0,0.1); + box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 0 1px 2px rgba(0,0,0,0.1); } input.button-primary.active, @@ -511,22 +525,11 @@ a.button-primary:active { background-image: -moz-linear-gradient(top, #21759b, #278ab7); background-image: -o-linear-gradient(top, #21759b, #278ab7); background-image: linear-gradient(to bottom, #21759b, #278ab7); - border-color: #124560 #2382ae #2382ae #124560; + border-color: #124560 #2382ae #2382ae #2382ae; color: rgba(255,255,255,0.95); - -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,0.1); - box-shadow: inset 1px 1px 0 rgba(0,0,0,0.1); -} - -.button-disabled, -.button[disabled], -.button:disabled, -.button-secondary[disabled], -.button-secondary:disabled, -a.button.disabled { - color: #aaa !important; - border-color: #ddd !important; - -webkit-box-shadow: none !important; - box-shadow: none !important; + -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1); + box-shadow: inset 0 1px 0 rgba(0,0,0,0.1); + text-shadow: 0 1px 0 rgba(0,0,0,0.1); } .button-primary-disabled, @@ -534,8 +537,10 @@ a.button.disabled { .button-primary:disabled { color: #94cde7 !important; background: #298cba !important; + border-color: #1b607f !important; -webkit-box-shadow: none !important; box-shadow: none !important; + text-shadow: 0 -1px 0 rgba(0,0,0,0.1) !important; } .button-primary-disabled:hover, diff --git a/wp-admin/css/wp-admin.css b/wp-admin/css/wp-admin.css index 5358027920..875c281db9 100644 --- a/wp-admin/css/wp-admin.css +++ b/wp-admin/css/wp-admin.css @@ -783,7 +783,7 @@ input.button-secondary { line-height: 17px; height: 15px; margin: 0; - padding: 0.25em 0.8em 0.35em; + padding: 0.25em 0.85em 0.35em; cursor: pointer; border-width: 1px; border-style: solid; @@ -795,17 +795,12 @@ input.button-secondary { white-space: nowrap; } -.button.button-large, -.button.button-primary { - padding: 0.4em 0.8em 0.5em; +.button.button-large { + padding: 0.4em 1.0em 0.5em; } .button.button-small { - padding: 0.15em 0.8em 0.17em; -} - -.button.regular { - padding: 0.25em 0.8em 0.35em !important; + padding: 0.15em 0.75em 0.17em; } #minor-publishing-actions input, diff --git a/wp-admin/includes/template.php b/wp-admin/includes/template.php index 0f909cdc34..31a1ebf252 100644 --- a/wp-admin/includes/template.php +++ b/wp-admin/includes/template.php @@ -1600,9 +1600,9 @@ function submit_button( $text = null, $type = 'primary', $name = 'submit', $wrap * Defaults to no other attributes. Other attributes can also be provided as a * string such as 'tabindex="1"', though the array format is typically cleaner. */ -function get_submit_button( $text = null, $type = 'primary', $name = 'submit', $wrap = true, $other_attributes = null ) { +function get_submit_button( $text = null, $type = 'primary large', $name = 'submit', $wrap = true, $other_attributes = null ) { if ( ! is_array( $type ) ) - $type = explode( ' ', $type ); + $type = explode( ' ', $type ); $button_shorthand = array( 'primary', 'small', 'large' ); $classes = array( 'button' );