From 67894a3407f97794b722042d9a29f37f5dddecf8 Mon Sep 17 00:00:00 2001 From: Daryl Koopersmith Date: Sat, 8 Sep 2012 04:58:34 +0000 Subject: [PATCH] New button styles. Using the new buttons: * Button classes are now stackable. * All buttons should use a base class of "button". * Buttons default to the gray style (formerly "button-secondary"). Buttons can add a style by adding additional classes. To make a primary button, add the "button-primary" class. * Buttons can be rendered in various sizes. In addition to the default size, you can add "button-large", "button-small", or "button-tiny". For backwards compatibility reasons, "button-primary" and "button-secondary" both work as standalone classes. get_submit_button() has been adjusted to handle shorthand button classes (i.e. button classes can be passed without the "button-" prefix). props lessbloat, helenyhou, trepmal, nacin. see #21598. git-svn-id: http://core.svn.wordpress.org/trunk@21789 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- wp-admin/css/colors-classic.css | 261 ++++++++++++------ wp-admin/css/colors-fresh.css | 170 ++++++++---- wp-admin/css/ie.css | 3 +- wp-admin/css/wp-admin-rtl.css | 2 - wp-admin/css/wp-admin.css | 70 ++--- wp-admin/edit-form-advanced.php | 2 +- .../includes/class-wp-comments-list-table.php | 4 +- .../includes/class-wp-links-list-table.php | 2 +- wp-admin/includes/class-wp-list-table.php | 4 +- .../includes/class-wp-media-list-table.php | 4 +- .../includes/class-wp-plugins-list-table.php | 2 +- .../includes/class-wp-posts-list-table.php | 4 +- .../includes/class-wp-users-list-table.php | 2 +- wp-admin/includes/dashboard.php | 4 +- wp-admin/includes/meta-boxes.php | 6 +- wp-admin/includes/plugin-install.php | 2 +- wp-admin/includes/post.php | 8 +- wp-admin/includes/template.php | 34 ++- wp-admin/js/post.js | 2 +- 19 files changed, 369 insertions(+), 217 deletions(-) diff --git a/wp-admin/css/colors-classic.css b/wp-admin/css/colors-classic.css index bf95e9b63c..aba8bd1e5e 100644 --- a/wp-admin/css/colors-classic.css +++ b/wp-admin/css/colors-classic.css @@ -57,6 +57,7 @@ input[type="text"]:focus, input[type="password"]:focus, input[type="file"]:focus, input[type="button"]:focus, +input[type="submit"].focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="email"]:focus, @@ -377,81 +378,147 @@ td.help { color: #666; } +a.button:active { + outline: none; +} + .button, .button-secondary, .submit input, input[type=button], input[type=submit] { - border-color: #bbb; - color: #464646; + background: #ececec; + 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 1px rgba(255,255,255, 0.9); + box-shadow: inset 0 0 1px 1px rgba(255,255,255, 0.9); + color: #464646; + text-shadow: 1px 1px 0 #fff; } +.button.hover, .button:hover, +.button-secondary.hover, .button-secondary:hover, .submit input:hover, input[type=button]:hover, -input[type=submit]:hover { +input[type=submit]:hover, +.button.focus, +.button:focus, +.button-secondary.focus, +.button-secondary:focus, +.submit input.focus, +.submit input:focus, +input[type=button]:focus, +input[type=submit].focus, +input[type=submit]:focus { + background: #ececec; + 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: #bbb; + -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,.1); + box-shadow: 0px 1px 1px rgba(0,0,0,.1); color: #000; - border-color: #666; -} - -.button, -.submit input, -.button-secondary { - text-shadow: 0 1px 0 #fff; - background: #f2f2f2; - background-image: -webkit-gradient(linear, left bottom, left top, from(#ededed), to(#fff)); - background-image: -webkit-linear-gradient(bottom, #ededed, #fff); - background-image: -moz-linear-gradient(bottom, #ededed, #fff); - background-image: -o-linear-gradient(bottom, #ededed, #fff); - background-image: linear-gradient(to top, #ededed, #fff); } +.button.active, .button:active, +.button-secondary.active, +.button-secondary:active, .submit input:active, -.button-secondary: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(#ededed), to(#fff)); - background-image: -webkit-linear-gradient(top, #ededed, #fff); - background-image: -moz-linear-gradient(top, #ededed, #fff); - background-image: -o-linear-gradient(top, #ededed, #fff); - background-image: linear-gradient(to bottom, #ededed, #fff); + 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); +} + +.button.focus, +.button:focus, +.button-secondary.focus, +.button-secondary:focus, +.submit input.focus, +.submit input:focus, +input[type=button].focus, +input[type=submit]:focus { + border-color: #aaa; } input.button-primary, button.button-primary, a.button-primary { - border-color: #298cba; - font-weight: bold; - color: #fff; - text-shadow: 0 -1px 0 rgba(0,0,0,0.3); - background: #21759b; - background-image: -webkit-gradient(linear, left bottom, left top, from(#227199), to(#298cba)); - background-image: -webkit-linear-gradient(bottom, #227199, #298cba); - background-image: -moz-linear-gradient(bottom, #227199, #298cba); - background-image: -o-linear-gradient(bottom, #227199, #298cba); - background-image: linear-gradient(to top, #227199, #298cba); -} - -input.button-primary:active, -button.button-primary:active, -a.button-primary:active { - color: #eaf2fa; - background: #298cba; - background-image: -webkit-gradient(linear, left top, left bottom, from(#227199), to(#298cba)); - background-image: -webkit-linear-gradient(top, #227199, #298cba); - background-image: -moz-linear-gradient(top, #227199, #298cba); - background-image: -o-linear-gradient(top, #227199, #298cba); - background-image: linear-gradient(to bottom, #227199, #298cba); + background-color: #21759b; + background-image: -webkit-gradient(linear, left top, left bottom, from(#2a95c5), to(#21759b)); + background-image: -webkit-linear-gradient(top, #2a95c5, #21759b); + background-image: -moz-linear-gradient(top, #2a95c5, #21759b); + background-image: -o-linear-gradient(top, #2a95c5, #21759b); + background-image: linear-gradient(to bottom, #2a95c5, #21759b); + border-color: #21759b; + border-bottom-color: #1e6a8d; + -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.5); + 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); } +input.button-primary.hover, input.button-primary:hover, button.button-primary:hover, a.button-primary:hover, -a.button-primary:focus, +input.button-primary.focus, +input.button-primary:focus, +button.button-primary:focus, +a.button-primary:focus { + background-color: #278ab7; + background-image: -webkit-gradient(linear, left top, left bottom, from(#2e9fd2), to(#21759b)); + background-image: -webkit-linear-gradient(top, #2e9fd2, #21759b); + background-image: -moz-linear-gradient(top, #2e9fd2, #21759b); + 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); + color: #fff; + text-shadow: -1px -1px 0 rgba(0,0,0,0.3); +} + +input.button-primary.active, +input.button-primary:active, +button.button-primary:active, a.button-primary:active { - border-color: #13455b; - color: #eaf2fa; + background: #1b607f; + background-image: -webkit-gradient(linear, left top, left bottom, from(#21759b), to(#278ab7)); + background-image: -webkit-linear-gradient(top, #21759b, #278ab7); + 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; + 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); +} + +input.button-primary.focus, +input.button-primary:focus, +button.button-primary:focus, +a.button-primary:focus { + border-color: #124560; } .button-disabled, @@ -462,13 +529,17 @@ a.button-primary:active { a.button.disabled { color: #aaa !important; border-color: #ddd !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; } .button-primary-disabled, .button-primary[disabled], .button-primary:disabled { - color: #9fd0d5 !important; + color: #94cde7 !important; background: #298cba !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; } a:hover, @@ -947,6 +1018,7 @@ table.widefat .spam a:hover, } /* Containers */ +.wp-editor-wrap .wp-editor-container, .wp-editor-wrap .wp_themeSkin table.mceLayout { border-color: #bed1dd #bed1dd #d0dfe9; } @@ -967,12 +1039,9 @@ table.widefat .spam a:hover, background-color: #f5f5f5; } -/* Button */ -.wp-editor-wrap .wp_themeSkin .mceButton, -.wp-editor-wrap .wp_themeSkin .mceListBox .mceText, -.wp-editor-wrap .wp_themeSkin .mceListBox .mceOpen { - border-color: #b0c8d7; - background: #cfdfe9; +.wp-editor-wrap .wp_themeSkin a.mceButtonEnabled:hover { + border-color: #bbb; + background: #eee; background-image: -webkit-gradient(linear, left bottom, left top, from(#cfdfe9), to(#fff)); background-image: -webkit-linear-gradient(bottom, #cfdfe9, #fff); background-image: -moz-linear-gradient(bottom, #cfdfe9, #fff); @@ -980,24 +1049,14 @@ table.widefat .spam a:hover, background-image: linear-gradient(to top, #cfdfe9, #fff); } -.wp-editor-wrap .wp_themeSkin a.mceButtonEnabled:hover { - border-color: #5589aa; - background: #c9c9c9; - background-image: -webkit-gradient(linear, left bottom, left top, from(#bdccd5), to(#000)); - background-image: -webkit-linear-gradient(bottom, #bdccd5, #fff); - background-image: -moz-linear-gradient(bottom, #bdccd5, #fff); - background-image: -o-linear-gradient(bottom, #bdccd5, #fff); - background-image: linear-gradient(to top, #bdccd5, #fff); -} - .wp-editor-wrap .wp_themeSkin a.mceButton:active, .wp-editor-wrap .wp_themeSkin a.mceButtonEnabled:active, .wp-editor-wrap .wp_themeSkin a.mceButtonSelected:active, .wp-editor-wrap .wp_themeSkin a.mceButtonActive, .wp-editor-wrap .wp_themeSkin a.mceButtonActive:active, .wp-editor-wrap .wp_themeSkin a.mceButtonActive:hover { - background: #b0c8d7; - border-color: #5589aa; + background: #c7d8e2; + border-color: #b0c8d7; background-image: -webkit-gradient(linear, left top, left bottom, from(#cfdfe9), to(#fff)); background-image: -webkit-linear-gradient(top, #cfdfe9, #fff); background-image: -moz-linear-gradient(top, #cfdfe9, #fff); @@ -1005,10 +1064,6 @@ table.widefat .spam a:hover, background-image: linear-gradient(to bottom, #cfdfe9, #fff); } -.wp-editor-wrap .wp_themeSkin .mceButtonDisabled { - border-color: #b0c8d7 !important; -} - .wp-editor-wrap .wp_themeSkin .mceListBox .mceOpen { border-left: 0 !important; } @@ -1019,16 +1074,21 @@ table.widefat .spam a:hover, .wp-editor-wrap .wp_themeSkin .mceListBoxSelected .mceOpen, .wp-editor-wrap .wp_themeSkin .mceListBoxSelected .mceText, .wp-editor-wrap .wp_themeSkin table.mceListBoxEnabled:active .mceText { - background: #b0c8d7; - border-color: #5589aa; + border-color: #B0C8D7; + background: #c9c9c9; + background-image: -webkit-gradient(linear, left bottom, left top, from(#fff), to(#bdccd5)); + background-image: -webkit-linear-gradient(bottom, #fff, #bdccd5); + background-image: -moz-linear-gradient(bottom, #fff, #bdccd5); + background-image: -o-linear-gradient(bottom, #fff, #bdccd5); + background-image: linear-gradient(to top, #fff, #bdccd5); } .wp-editor-wrap .wp_themeSkin table.mceListBoxEnabled:hover .mceText, .wp-editor-wrap .wp_themeSkin .mceListBoxHover .mceText, .wp-editor-wrap .wp_themeSkin table.mceListBoxEnabled:hover .mceOpen, .wp-editor-wrap .wp_themeSkin .mceListBoxHover .mceOpen { - border-color: #5589aa; - background: #c9c9c9; + border-color: #B0C8D7; + background: #c7d8e2; background-image: -webkit-gradient(linear, left bottom, left top, from(#cfdfe9), to(#fff)); background-image: -webkit-linear-gradient(bottom, #cfdfe9, #fff); background-image: -moz-linear-gradient(bottom, #cfdfe9, #fff); @@ -1036,39 +1096,56 @@ table.widefat .spam a:hover, background-image: linear-gradient(to top, #cfdfe9, #fff); } -/* SplitButton */ -.wp-editor-wrap .wp_themeSkin .mceSplitButton a.mceAction, -.wp-editor-wrap .wp_themeSkin .mceSplitButton a.mceOpen { - border-color: #b0c8d7; -} - -.wp-editor-wrap .wp_themeSkin .mceSplitButton a.mceOpen:hover, +.wp-editor-wrap .wp_themeSkin .mceSplitButton:hover a.mceOpen, .wp-editor-wrap .wp_themeSkin .mceSplitButtonSelected a.mceOpen, +.wp-editor-wrap .wp_themeSkin .mceSplitButtonSelected a.mceAction, .wp-editor-wrap .wp_themeSkin table.mceSplitButtonEnabled:hover a.mceAction, .wp-editor-wrap .wp_themeSkin .mceSplitButton a.mceAction:hover { - border-color: #5589aa; + border-color: #B0C8D7; } -.wp-editor-wrap .wp_themeSkin table.mceSplitButton td { - background: #cfdfe9; - background-image: -webkit-gradient(linear, left bottom, left top, from(#cfdfe9), to(#fff)); - background-image: -webkit-linear-gradient(bottom, #cfdfe9, #fff); - background-image: -moz-linear-gradient(bottom, #cfdfe9, #fff); - background-image: -o-linear-gradient(bottom, #cfdfe9, #fff); - background-image: linear-gradient(to top, #cfdfe9, #fff); +.wp-editor-wrap .wp_themeSkin .mceSplitButtonSelected td { + background: #c9c9c9; + background-image: -webkit-gradient(linear, left bottom, left top, from(#fff), to(#bdccd5)); + background-image: -webkit-linear-gradient(bottom, #fff, #bdccd5); + background-image: -moz-linear-gradient(bottom, #fff, #bdccd5); + background-image: -o-linear-gradient(bottom, #fff, #bdccd5); + background-image: linear-gradient(to top, #fff, #bdccd5); } .wp-editor-wrap .wp_themeSkin table.mceSplitButton:hover td { + border-color: #bbb; background: #c9c9c9; - background-image: -webkit-gradient(linear, left bottom, left top, from(#bdccd5), to(#000)); + background-image: -webkit-gradient(linear, left bottom, left top, from(#bdccd5), to(#fff)); background-image: -webkit-linear-gradient(bottom, #bdccd5, #fff); background-image: -moz-linear-gradient(bottom, #bdccd5, #fff); background-image: -o-linear-gradient(bottom, #bdccd5, #fff); background-image: linear-gradient(to top, #bdccd5, #fff); } -.wp-editor-wrap .wp_themeSkin .mceSplitButtonActive { - background-color: #b0c8d7; +.wp-editor-wrap .wp_themeSkin table.mceSplitButton:active td.mceFirst, +.wp-editor-wrap .wp_themeSkin table.mceSplitButton td.mceLast:active { + border-color: #bbb; + background: #c9c9c9; + background-image: -webkit-gradient(linear, left bottom, left top, from(#fff), to(#bdccd5)); + background-image: -webkit-linear-gradient(bottom, #fff, #bdccd5); + background-image: -moz-linear-gradient(bottom, #fff, #bdccd5); + background-image: -o-linear-gradient(bottom, #fff, #bdccd5); + background-image: linear-gradient(to top, #fff, #bdccd5); +} + +.wp-editor-wrap .wp_themeSkin .mceSplitButtonActive td a.mceAction, +.wp-editor-wrap .wp_themeSkin .mceSplitButtonActive td a.mceOpen { + border-color: #B0C8D7; +} + +.wp-editor-wrap .wp_themeSkin .mceSplitButtonActive td { + background: #c9c9c9; + background-image: -webkit-gradient(linear, left bottom, left top, from(#fff), to(#bdccd5)); + background-image: -webkit-linear-gradient(bottom, #fff, #bdccd5); + background-image: -moz-linear-gradient(bottom, #fff, #bdccd5); + background-image: -o-linear-gradient(bottom, #fff, #bdccd5); + background-image: linear-gradient(to top, #fff, #bdccd5); } /* ColorSplitButton */ diff --git a/wp-admin/css/colors-fresh.css b/wp-admin/css/colors-fresh.css index 0559953ce7..de8df2fe3b 100644 --- a/wp-admin/css/colors-fresh.css +++ b/wp-admin/css/colors-fresh.css @@ -52,6 +52,7 @@ input[type="text"]:focus, input[type="password"]:focus, input[type="file"]:focus, input[type="button"]:focus, +input[type="submit"].focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="email"]:focus, @@ -368,81 +369,150 @@ td.help { color: #666; } +a.button:active { + outline: none; +} + .button, .button-secondary, .submit input, input[type=button], input[type=submit] { - border-color: #bbb; - color: #464646; + background: #ececec; + 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 1px rgba(255,255,255, 0.9); + box-shadow: inset 0 0 1px 1px rgba(255,255,255, 0.9); + color: #464646; + text-shadow: 1px 1px 0 #fff; } +.button.hover, .button:hover, +.button-secondary.hover, .button-secondary:hover, .submit input:hover, input[type=button]:hover, -input[type=submit]:hover { +input[type=submit]:hover, +.button.focus, +.button:focus, +.button-secondary.focus, +.button-secondary:focus, +.submit input.focus, +.submit input:focus, +input[type=button].focus, +input[type=button]:focus, +input[type=submit]:focus { + background: #ececec; + 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: #bbb; + -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,.1); + box-shadow: 0px 1px 1px rgba(0,0,0,.1); color: #000; - border-color: #666; -} - -.button, -.submit input, -.button-secondary { - text-shadow: 0 1px 0 #fff; - background: #f2f2f2; - background-image: -webkit-gradient(linear, left bottom, left top, from(#ededed), to(#fff)); - background-image: -webkit-linear-gradient(bottom, #ededed, #fff); - background-image: -moz-linear-gradient(bottom, #ededed, #fff); - background-image: -o-linear-gradient(bottom, #ededed, #fff); - background-image: linear-gradient(to top, #ededed, #fff); } +.button.active, .button:active, +.small.active, +.small:active, +.button-secondary.active, +.button-secondary:active, .submit input:active, -.button-secondary:active { +input[type=button].active, +input[type=button]:active, +input[type=submit]:active { background: #eee; - background-image: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff)); - background-image: -webkit-linear-gradient(top, #ededed, #fff); - background-image: -moz-linear-gradient(top, #ededed, #fff); - background-image: -o-linear-gradient(top, #ededed, #fff); - background-image: linear-gradient(to bottom, #ededed, #fff); + 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); +} + +.button.focus, +.button:focus, +.button-secondary.focus, +.button-secondary:focus, +.submit input.focus, +.submit input:focus, +input[type=button].focus, +input[type=button]:focus, +input[type=submit]:focus { + border-color: #aaa; } input.button-primary, button.button-primary, a.button-primary { - border-color: #298cba; - font-weight: bold; - color: #fff; - text-shadow: 0 -1px 0 rgba(0,0,0,0.3); - background: #21759b; - background-image: -webkit-gradient(linear, left bottom, left top, from(#227199), to(#298cba)); - background-image: -webkit-linear-gradient(bottom, #227199, #298cba); - background-image: -moz-linear-gradient(bottom, #227199, #298cba); - background-image: -o-linear-gradient(bottom, #227199, #298cba); - background-image: linear-gradient(to top, #227199, #298cba); -} - -input.button-primary:active, -button.button-primary:active, -a.button-primary:active { - color: #eaf2fa; - background: #298cba; - background-image: -webkit-gradient(linear, left top, left bottom, from(#227199), to(#298cba)); - background-image: -webkit-linear-gradient(top, #227199, #298cba); - background-image: -moz-linear-gradient(top, #227199, #298cba); - background-image: -o-linear-gradient(top, #227199, #298cba); - background-image: linear-gradient(to bottom, #227199, #298cba); + background-color: #21759b; + background-image: -webkit-gradient(linear, left top, left bottom, from(#2a95c5), to(#21759b)); + background-image: -webkit-linear-gradient(top, #2a95c5, #21759b); + background-image: -moz-linear-gradient(top, #2a95c5, #21759b); + background-image: -o-linear-gradient(top, #2a95c5, #21759b); + background-image: linear-gradient(to bottom, #2a95c5, #21759b); + border-color: #21759b; + border-bottom-color: #1e6a8d; + -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.5); + 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); } +input.button-primary.hover, input.button-primary:hover, button.button-primary:hover, a.button-primary:hover, -a.button-primary:focus, +input.button-primary.focus, +input.button-primary:focus, +button.button-primary:focus, +a.button-primary:focus { + background-color: #278ab7; + background-image: -webkit-gradient(linear, left top, left bottom, from(#2e9fd2), to(#21759b)); + background-image: -webkit-linear-gradient(top, #2e9fd2, #21759b); + background-image: -moz-linear-gradient(top, #2e9fd2, #21759b); + 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); + color: #fff; + text-shadow: -1px -1px 0 rgba(0,0,0,0.3); +} + +input.button-primary.active, +input.button-primary:active, +button.button-primary:active, a.button-primary:active { - border-color: #13455b; - color: #eaf2fa; + background: #1b607f; + background-image: -webkit-gradient(linear, left top, left bottom, from(#21759b), to(#278ab7)); + background-image: -webkit-linear-gradient(top, #21759b, #278ab7); + 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; + 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); +} + +input.button-primary.focus, +input.button-primary:focus, +button.button-primary:focus, +a.button-primary:focus { + border-color: #124560; } .button-disabled, @@ -453,13 +523,17 @@ a.button-primary:active { a.button.disabled { color: #aaa !important; border-color: #ddd !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; } .button-primary-disabled, .button-primary[disabled], .button-primary:disabled { - color: #9fd0d5 !important; + color: #94cde7 !important; background: #298cba !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; } a:hover, diff --git a/wp-admin/css/ie.css b/wp-admin/css/ie.css index 5be3b8791d..21d481a80b 100644 --- a/wp-admin/css/ie.css +++ b/wp-admin/css/ie.css @@ -124,8 +124,7 @@ table.fixed td { #wpbody-content input.button, #wpbody-content input.button-primary, -#wpbody-content input.button-secondary, -#wpbody-content input.button-highlighted { +#wpbody-content input.button-secondary { overflow: visible; } diff --git a/wp-admin/css/wp-admin-rtl.css b/wp-admin/css/wp-admin-rtl.css index f86de7e4cb..7cbbd6aa52 100644 --- a/wp-admin/css/wp-admin-rtl.css +++ b/wp-admin/css/wp-admin-rtl.css @@ -2303,7 +2303,6 @@ h3.tb { .button, .button-primary, .button-secondary, -.button-highlighted, #postcustomstuff .submit input { font-family: Tahoma, Arial, sans-serif; } @@ -2473,7 +2472,6 @@ body.login.locale-he-il, .locale-he-il .button, .locale-he-il .button-primary, .locale-he-il .button-secondary, -.locale-he-il .button-highlighted, .locale-he-il #postcustomstuff .submit input, .locale-he-il div.sidebar-name h3 { font-family: Arial, sans-serif; diff --git a/wp-admin/css/wp-admin.css b/wp-admin/css/wp-admin.css index 90adf711c1..b692fea4bf 100644 --- a/wp-admin/css/wp-admin.css +++ b/wp-admin/css/wp-admin.css @@ -779,28 +779,41 @@ input.button, .button-primary, input.button-primary, .button-secondary, -input.button-secondary, -.button-highlighted, -input.button-highlighted, -#postcustomstuff .submit input { +input.button-secondary { + display: inline-block; text-decoration: none; - font-size: 12px !important; - line-height: 13px; - padding: 3px 8px; + font-size: 12px; + line-height: 15px; + margin: 0; + padding: 0.5em 0.8em 0.4em; cursor: pointer; border-width: 1px; border-style: solid; - -webkit-border-radius: 11px; - border-radius: 11px; - -moz-box-sizing: content-box; + -webkit-border-radius: 3px; + border-radius: 3px; -webkit-box-sizing: content-box; - box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; + white-space: nowrap; +} + +.button.button-small { + padding: 3px .8em 2px; +} + +.button.button-large { + font-size: 14px; + padding: 0.6em 1em 0.5em; +} + +.button.button-tiny { + padding: .2em .8em; + font-size: 11px; } #minor-publishing-actions input, #major-publishing-actions input, #minor-publishing-actions .preview { - min-width: 80px; text-align: center; } @@ -1015,15 +1028,6 @@ ul#add-to-blog-users { list-style: square; } -a.button, -a.button-primary, -a.button-secondary { - line-height: 15px; - padding: 3px 10px; - white-space: nowrap; - -webkit-border-radius: 10px; -} - .approve, .unapproved .unapprove { display: none; @@ -2804,7 +2808,7 @@ table .inline-edit-row fieldset ul.cat-hover { #titlediv { position: relative; - margin-bottom: 20px; + margin-bottom: 10px; } #titlediv label { cursor: text; } @@ -2857,11 +2861,15 @@ input#link_url { } #edit-slug-box { - height: 1em; margin-top: 8px; padding: 0 10px; } +#edit-slug-box .cancel { + margin-right: 10px; + font-size: 11px; +} + #editable-post-name-full { display: none; } @@ -3159,7 +3167,7 @@ td.plugin-title p { #postcustom #postcustomstuff .submit { border: 0 none; float: none; - padding: 5px 8px; + padding: 0 0 8px 8px; } #side-sortables #postcustom #postcustomstuff .submit { @@ -3195,10 +3203,6 @@ td.plugin-title p { width: 38%; } -#postcustomstuff #newmeta .submit { - padding: 0 8px; -} - #postcustomstuff .submit input, #postcustomstuff table #newmeta-submit { width: auto; @@ -4243,7 +4247,7 @@ span.imgedit-scale-warn { #replysubmit { margin: 0; - padding: 0 7px 3px; + padding: 0 5px 3px; text-align: center; } @@ -4672,8 +4676,6 @@ h2 .nav-tab { .plugins .name, #pass-strength-result.strong, #pass-strength-result.short, -.button-highlighted, -input.button-highlighted, #ed_reply_toolbar #ed_reply_strong, .item-controls .item-order a, .feature-filter .feature-name { @@ -5631,7 +5633,6 @@ table.form-table td .updated { padding: 0; } -#titlediv, #poststuff .postarea { margin-bottom: 20px; } @@ -6084,7 +6085,7 @@ h3:hover .edit-box { } #dashboard-widgets #dashboard_quick_press form p.submit #save-post { - margin: 0 1em 0 10px; + margin: 0 0.3em 0 5px; } #dashboard-widgets #dashboard_quick_press form p.submit #publish { @@ -6278,8 +6279,7 @@ a.rsswidget { .login .button-primary { font-size: 13px !important; - line-height: 16px; - padding: 3px 10px; + padding: .4em .8em; float: right; } diff --git a/wp-admin/edit-form-advanced.php b/wp-admin/edit-form-advanced.php index d2ba3e241c..830855de7a 100644 --- a/wp-admin/edit-form-advanced.php +++ b/wp-admin/edit-form-advanced.php @@ -294,7 +294,7 @@ wp_nonce_field( 'closedpostboxes', 'closedpostboxesnonce', false ); $sample_permalink_html = $post_type_object->public ? get_sample_permalink_html($post->ID) : ''; $shortlink = wp_get_shortlink($post->ID, 'post'); if ( !empty($shortlink) ) - $sample_permalink_html .= '' . __('Get Shortlink') . ''; + $sample_permalink_html .= '' . __('Get Shortlink') . ''; if ( $post_type_object->public && ! ( 'pending' == $post->post_status && !current_user_can( $post_type_object->cap->publish_posts ) ) ) { ?>
diff --git a/wp-admin/includes/class-wp-comments-list-table.php b/wp-admin/includes/class-wp-comments-list-table.php index 7a2920863f..9e98f03882 100644 --- a/wp-admin/includes/class-wp-comments-list-table.php +++ b/wp-admin/includes/class-wp-comments-list-table.php @@ -224,13 +224,13 @@ class WP_Comments_List_Table extends WP_List_Table { ?> 'post-query-submit' ) ); + submit_button( __( 'Filter' ), 'small', false, false, array( 'id' => 'post-query-submit' ) ); } if ( ( 'spam' == $comment_status || 'trash' == $comment_status ) && current_user_can( 'moderate_comments' ) ) { wp_nonce_field( 'bulk-destroy', '_destroy_nonce' ); $title = ( 'spam' == $comment_status ) ? esc_attr__( 'Empty Spam' ) : esc_attr__( 'Empty Trash' ); - submit_button( $title, 'button-secondary apply', 'delete_all', false ); + submit_button( $title, 'small apply', 'delete_all', false ); } do_action( 'manage_comments_nav', $comment_status ); echo '
'; diff --git a/wp-admin/includes/class-wp-links-list-table.php b/wp-admin/includes/class-wp-links-list-table.php index ae17162e94..34be076aaf 100644 --- a/wp-admin/includes/class-wp-links-list-table.php +++ b/wp-admin/includes/class-wp-links-list-table.php @@ -68,7 +68,7 @@ class WP_Links_List_Table extends WP_List_Table { 'orderby' => 'name', ); wp_dropdown_categories( $dropdown_options ); - submit_button( __( 'Filter' ), 'secondary', false, false, array( 'id' => 'post-query-submit' ) ); + submit_button( __( 'Filter' ), 'small', false, false, array( 'id' => 'post-query-submit' ) ); ?> - 'search-submit') ); ?> + 'search-submit') ); ?>

\n"; - submit_button( __( 'Apply' ), 'button-secondary action', false, false, array( 'id' => "doaction$two" ) ); + submit_button( __( 'Apply' ), 'small action', false, false, array( 'id' => "doaction$two" ) ); echo "\n"; } diff --git a/wp-admin/includes/class-wp-media-list-table.php b/wp-admin/includes/class-wp-media-list-table.php index 2f959b8dd4..a74a3ad501 100644 --- a/wp-admin/includes/class-wp-media-list-table.php +++ b/wp-admin/includes/class-wp-media-list-table.php @@ -91,13 +91,13 @@ class WP_Media_List_Table extends WP_List_Table { $this->months_dropdown( 'attachment' ); do_action( 'restrict_manage_posts' ); - submit_button( __( 'Filter' ), 'secondary', false, false, array( 'id' => 'post-query-submit' ) ); + submit_button( __( 'Filter' ), 'small', false, false, array( 'id' => 'post-query-submit' ) ); } if ( $this->detached ) { submit_button( __( 'Scan for lost attachments' ), 'secondary', 'find_detached', false ); } elseif ( $this->is_trash && current_user_can( 'edit_others_posts' ) ) { - submit_button( __( 'Empty Trash' ), 'button-secondary apply', 'delete_all', false ); + submit_button( __( 'Empty Trash' ), 'small apply', 'delete_all', false ); } ?> is_network && 'recently_activated' == $status ) - submit_button( __( 'Clear List' ), 'secondary', 'clear-recent-list', false ); + submit_button( __( 'Clear List' ), 'small', 'clear-recent-list', false ); elseif ( 'top' == $which && 'mustuse' == $status ) echo '

' . sprintf( __( 'Files in the %s directory are executed automatically.' ), str_replace( ABSPATH, '/', WPMU_PLUGIN_DIR ) ) . '

'; elseif ( 'top' == $which && 'dropins' == $status ) diff --git a/wp-admin/includes/class-wp-posts-list-table.php b/wp-admin/includes/class-wp-posts-list-table.php index 723f6ea6fc..cf5f0e1843 100644 --- a/wp-admin/includes/class-wp-posts-list-table.php +++ b/wp-admin/includes/class-wp-posts-list-table.php @@ -218,11 +218,11 @@ class WP_Posts_List_Table extends WP_List_Table { wp_dropdown_categories( $dropdown_options ); } do_action( 'restrict_manage_posts' ); - submit_button( __( 'Filter' ), 'secondary', false, false, array( 'id' => 'post-query-submit' ) ); + submit_button( __( 'Filter' ), 'small', false, false, array( 'id' => 'post-query-submit' ) ); } if ( $this->is_trash && current_user_can( $post_type_object->cap->edit_others_posts ) ) { - submit_button( __( 'Empty Trash' ), 'button-secondary apply', 'delete_all', false ); + submit_button( __( 'Empty Trash' ), 'small apply', 'delete_all', false ); } ?> diff --git a/wp-admin/includes/class-wp-users-list-table.php b/wp-admin/includes/class-wp-users-list-table.php index 6dbb6b157d..2b82f15574 100644 --- a/wp-admin/includes/class-wp-users-list-table.php +++ b/wp-admin/includes/class-wp-users-list-table.php @@ -145,7 +145,7 @@ class WP_Users_List_Table extends WP_List_Table { - + " method="get">

- 'submit_users' ) ); ?> + 'submit_users' ) ); ?>

- 'submit_sites' ) ); ?> + 'submit_sites' ) ); ?>

post_status && 'future' != $post->post_status && 'pending' != $post->post_status ) { ?> -post_status ) { ?>style="display:none" type="submit" name="save" id="save-post" value="" class="button button-highlighted" /> +post_status ) { ?>style="display:none" type="submit" name="save" id="save-post" value="" class="button" /> post_status && $can_publish ) { ?> - +
@@ -286,7 +286,7 @@ function post_tags_meta_box($post, $box) {
labels->add_new_item; ?>

-

+

labels->separate_items_with_commas ); ?>

diff --git a/wp-admin/includes/plugin-install.php b/wp-admin/includes/plugin-install.php index 3d1b2dad3a..a72f4539b3 100644 --- a/wp-admin/includes/plugin-install.php +++ b/wp-admin/includes/plugin-install.php @@ -130,7 +130,7 @@ function install_search_form( $type_selector = true ) { - + ' . __('Permalink:') . "\n" . '' . $permalink . "\n"; if ( '' == get_option( 'permalink_structure' ) && current_user_can( 'manage_options' ) && !( 'page' == get_option('show_on_front') && $id == get_option('page_on_front') ) ) - $return .= '' . __('Change Permalinks') . "\n"; + $return .= '' . __('Change Permalinks') . "\n"; if ( isset($view_post) ) - $return .= "$view_post\n"; + $return .= "$view_post\n"; $return = apply_filters('get_sample_permalink_html', $return, $id, $new_title, $new_slug); @@ -1113,10 +1113,10 @@ function get_sample_permalink_html( $id, $new_title = null, $new_slug = null ) { $return = '' . __('Permalink:') . "\n"; $return .= '' . $display_link . "\n"; $return .= '‎'; // Fix bi-directional text display defect in RTL languages. - $return .= '' . __('Edit') . "\n"; + $return .= '' . __('Edit') . "\n"; $return .= '' . $post_name . "\n"; if ( isset($view_post) ) - $return .= "$view_post\n"; + $return .= "$view_post\n"; $return = apply_filters('get_sample_permalink_html', $return, $id, $new_title, $new_slug); diff --git a/wp-admin/includes/template.php b/wp-admin/includes/template.php index efc04704bd..0f250c6362 100644 --- a/wp-admin/includes/template.php +++ b/wp-admin/includes/template.php @@ -554,7 +554,7 @@ function meta_form() { - 'newmeta-submit' ) ); ?> + 'newmeta-submit' ) ); ?> @@ -1115,10 +1115,10 @@ function do_settings_sections( $page ) { foreach ( (array) $wp_settings_sections[$page] as $section ) { if ( $section['title'] ) echo "

{$section['title']}

\n"; - + if ( $section['callback'] ) call_user_func( $section['callback'], $section ); - + if ( ! isset( $wp_settings_fields ) || !isset( $wp_settings_fields[$page] ) || !isset( $wp_settings_fields[$page][$section['id']] ) ) continue; echo ''; @@ -1637,18 +1637,22 @@ function submit_button( $text = null, $type = 'primary', $name = 'submit', $wrap * 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 ) { - switch ( $type ) : - case 'primary' : - case 'secondary' : - $class = 'button-' . $type; - break; - case 'delete' : - $class = 'button-secondary delete'; - break; - default : - $class = $type; // Custom cases can just pass in the classes they want to be used - endswitch; - $text = ( null == $text ) ? __( 'Save Changes' ) : $text; + if ( ! is_array( $type ) ) + $type = explode( ' ', $type ); + + $button_shorthand = array( 'primary', 'tiny', 'small', 'large' ); + $classes = array( 'button' ); + foreach ( $type as $t ) { + if ( 'secondary' === $t || 'button-secondary' === $t ) + continue; + $classes[] = in_array( $t, $button_shorthand ) ? 'button-' . $t : $t; + } + $class = implode( ' ', array_unique( $classes ) ); + + if ( 'delete' === $type ) + $class = 'button-secondary delete'; + + $text = $text ? $text : __( 'Save Changes' ); // Default the id attribute to $name unless an id was specifically provided in $other_attributes $id = $name; diff --git a/wp-admin/js/post.js b/wp-admin/js/post.js index b5c10799dc..a0bea0ec30 100644 --- a/wp-admin/js/post.js +++ b/wp-admin/js/post.js @@ -558,7 +558,7 @@ jQuery(document).ready( function($) { var i, c = 0, e = $('#editable-post-name'), revert_e = e.html(), real_slug = $('#post_name'), revert_slug = real_slug.val(), b = $('#edit-slug-buttons'), revert_b = b.html(), full = $('#editable-post-name-full').html(); $('#view-post-btn').hide(); - b.html(''+postL10n.ok+''+postL10n.cancel+''); + b.html(''+postL10n.ok+''+postL10n.cancel+''); b.children('.save').click(function() { var new_slug = e.children('input').val(); if ( new_slug == $('#editable-post-name-full').text() ) {