From: isarra Date: Sun, 17 Mar 2013 18:48:20 +0000 (-0700) Subject: Bug 44855, Bug 37743: Improved vector button styles for jquery.ui X-Git-Tag: 1.31.0-rc.0~19821^2 X-Git-Url: http://git.cyclocoop.org/%7B%24admin_url%7Dcompta/comptes/journal.php?a=commitdiff_plain;h=1cc5b1575eb920624b6530b563f211003dcdbb11;p=lhc%2Fweb%2Fwiklou.git Bug 44855, Bug 37743: Improved vector button styles for jquery.ui Removed the orange because orange is an evil colour, made the other colours brighter with softer gradients, added specific support for active and focus states, made disabled buttons all grey. Looks like this: http://jsfiddle.net/vPaM2/12/ Bug: 44855 Bug: 37743 Change-Id: I6f28ce6c9c3403d8377b4b3aaa7495b01853ee0e --- diff --git a/resources/jquery.ui/themes/vector/images/button-blue-hover-large.png b/resources/jquery.ui/themes/vector/images/button-blue-hover-large.png deleted file mode 100644 index 8f7cf74ebe..0000000000 Binary files a/resources/jquery.ui/themes/vector/images/button-blue-hover-large.png and /dev/null differ diff --git a/resources/jquery.ui/themes/vector/images/button-blue-hover.png b/resources/jquery.ui/themes/vector/images/button-blue-hover.png deleted file mode 100644 index 1fc281638a..0000000000 Binary files a/resources/jquery.ui/themes/vector/images/button-blue-hover.png and /dev/null differ diff --git a/resources/jquery.ui/themes/vector/images/button-blue-large.png b/resources/jquery.ui/themes/vector/images/button-blue-large.png deleted file mode 100644 index 22ee5e596f..0000000000 Binary files a/resources/jquery.ui/themes/vector/images/button-blue-large.png and /dev/null differ diff --git a/resources/jquery.ui/themes/vector/images/button-blue.png b/resources/jquery.ui/themes/vector/images/button-blue.png deleted file mode 100644 index 2e6d121a4d..0000000000 Binary files a/resources/jquery.ui/themes/vector/images/button-blue.png and /dev/null differ diff --git a/resources/jquery.ui/themes/vector/images/button-disabled-blue.png b/resources/jquery.ui/themes/vector/images/button-disabled-blue.png deleted file mode 100644 index 28eb1fcdbb..0000000000 Binary files a/resources/jquery.ui/themes/vector/images/button-disabled-blue.png and /dev/null differ diff --git a/resources/jquery.ui/themes/vector/images/button-disabled-green.png b/resources/jquery.ui/themes/vector/images/button-disabled-green.png deleted file mode 100644 index 0e29d85bbb..0000000000 Binary files a/resources/jquery.ui/themes/vector/images/button-disabled-green.png and /dev/null differ diff --git a/resources/jquery.ui/themes/vector/images/button-disabled-red.png b/resources/jquery.ui/themes/vector/images/button-disabled-red.png deleted file mode 100644 index ede6998849..0000000000 Binary files a/resources/jquery.ui/themes/vector/images/button-disabled-red.png and /dev/null differ diff --git a/resources/jquery.ui/themes/vector/images/button-disabled.png b/resources/jquery.ui/themes/vector/images/button-disabled.png deleted file mode 100644 index e4e4ec1c34..0000000000 Binary files a/resources/jquery.ui/themes/vector/images/button-disabled.png and /dev/null differ diff --git a/resources/jquery.ui/themes/vector/images/button-down-blue.png b/resources/jquery.ui/themes/vector/images/button-down-blue.png deleted file mode 100644 index 766e5746c7..0000000000 Binary files a/resources/jquery.ui/themes/vector/images/button-down-blue.png and /dev/null differ diff --git a/resources/jquery.ui/themes/vector/images/button-down-green.png b/resources/jquery.ui/themes/vector/images/button-down-green.png deleted file mode 100644 index 90969c399c..0000000000 Binary files a/resources/jquery.ui/themes/vector/images/button-down-green.png and /dev/null differ diff --git a/resources/jquery.ui/themes/vector/images/button-down-red.png b/resources/jquery.ui/themes/vector/images/button-down-red.png deleted file mode 100644 index f625729876..0000000000 Binary files a/resources/jquery.ui/themes/vector/images/button-down-red.png and /dev/null differ diff --git a/resources/jquery.ui/themes/vector/images/button-down.png b/resources/jquery.ui/themes/vector/images/button-down.png deleted file mode 100644 index c6467571f5..0000000000 Binary files a/resources/jquery.ui/themes/vector/images/button-down.png and /dev/null differ diff --git a/resources/jquery.ui/themes/vector/images/button-green-hover-large.png b/resources/jquery.ui/themes/vector/images/button-green-hover-large.png deleted file mode 100644 index dd8851e151..0000000000 Binary files a/resources/jquery.ui/themes/vector/images/button-green-hover-large.png and /dev/null differ diff --git a/resources/jquery.ui/themes/vector/images/button-green-hover.png b/resources/jquery.ui/themes/vector/images/button-green-hover.png deleted file mode 100644 index 19c399112f..0000000000 Binary files a/resources/jquery.ui/themes/vector/images/button-green-hover.png and /dev/null differ diff --git a/resources/jquery.ui/themes/vector/images/button-green-large.png b/resources/jquery.ui/themes/vector/images/button-green-large.png deleted file mode 100644 index a8e830ebfa..0000000000 Binary files a/resources/jquery.ui/themes/vector/images/button-green-large.png and /dev/null differ diff --git a/resources/jquery.ui/themes/vector/images/button-green.png b/resources/jquery.ui/themes/vector/images/button-green.png deleted file mode 100644 index 54c418e943..0000000000 Binary files a/resources/jquery.ui/themes/vector/images/button-green.png and /dev/null differ diff --git a/resources/jquery.ui/themes/vector/images/button-large-disabled-green.png b/resources/jquery.ui/themes/vector/images/button-large-disabled-green.png deleted file mode 100644 index f76f7b057f..0000000000 Binary files a/resources/jquery.ui/themes/vector/images/button-large-disabled-green.png and /dev/null differ diff --git a/resources/jquery.ui/themes/vector/images/button-large-off-green.png b/resources/jquery.ui/themes/vector/images/button-large-off-green.png deleted file mode 100644 index f997431b10..0000000000 Binary files a/resources/jquery.ui/themes/vector/images/button-large-off-green.png and /dev/null differ diff --git a/resources/jquery.ui/themes/vector/images/button-off-blue.png b/resources/jquery.ui/themes/vector/images/button-off-blue.png deleted file mode 100644 index 82dedb5310..0000000000 Binary files a/resources/jquery.ui/themes/vector/images/button-off-blue.png and /dev/null differ diff --git a/resources/jquery.ui/themes/vector/images/button-off-green.png b/resources/jquery.ui/themes/vector/images/button-off-green.png deleted file mode 100644 index 109907f016..0000000000 Binary files a/resources/jquery.ui/themes/vector/images/button-off-green.png and /dev/null differ diff --git a/resources/jquery.ui/themes/vector/images/button-off-red.png b/resources/jquery.ui/themes/vector/images/button-off-red.png deleted file mode 100644 index 5a85b8aac4..0000000000 Binary files a/resources/jquery.ui/themes/vector/images/button-off-red.png and /dev/null differ diff --git a/resources/jquery.ui/themes/vector/images/button-off.png b/resources/jquery.ui/themes/vector/images/button-off.png deleted file mode 100644 index cc5eb1194e..0000000000 Binary files a/resources/jquery.ui/themes/vector/images/button-off.png and /dev/null differ diff --git a/resources/jquery.ui/themes/vector/images/button-orange-hover-large.png b/resources/jquery.ui/themes/vector/images/button-orange-hover-large.png deleted file mode 100644 index 6f0dbd5d70..0000000000 Binary files a/resources/jquery.ui/themes/vector/images/button-orange-hover-large.png and /dev/null differ diff --git a/resources/jquery.ui/themes/vector/images/button-orange-hover.png b/resources/jquery.ui/themes/vector/images/button-orange-hover.png deleted file mode 100644 index a1077c5807..0000000000 Binary files a/resources/jquery.ui/themes/vector/images/button-orange-hover.png and /dev/null differ diff --git a/resources/jquery.ui/themes/vector/images/button-orange-large.png b/resources/jquery.ui/themes/vector/images/button-orange-large.png deleted file mode 100644 index 3d7f37f62c..0000000000 Binary files a/resources/jquery.ui/themes/vector/images/button-orange-large.png and /dev/null differ diff --git a/resources/jquery.ui/themes/vector/images/button-orange.png b/resources/jquery.ui/themes/vector/images/button-orange.png deleted file mode 100644 index 02347cf924..0000000000 Binary files a/resources/jquery.ui/themes/vector/images/button-orange.png and /dev/null differ diff --git a/resources/jquery.ui/themes/vector/images/button-over-blue.png b/resources/jquery.ui/themes/vector/images/button-over-blue.png deleted file mode 100644 index 9edb7aa2be..0000000000 Binary files a/resources/jquery.ui/themes/vector/images/button-over-blue.png and /dev/null differ diff --git a/resources/jquery.ui/themes/vector/images/button-over-green.png b/resources/jquery.ui/themes/vector/images/button-over-green.png deleted file mode 100644 index 47a0b1b807..0000000000 Binary files a/resources/jquery.ui/themes/vector/images/button-over-green.png and /dev/null differ diff --git a/resources/jquery.ui/themes/vector/images/button-over-red.png b/resources/jquery.ui/themes/vector/images/button-over-red.png deleted file mode 100644 index a2445365d3..0000000000 Binary files a/resources/jquery.ui/themes/vector/images/button-over-red.png and /dev/null differ diff --git a/resources/jquery.ui/themes/vector/images/button-over.png b/resources/jquery.ui/themes/vector/images/button-over.png deleted file mode 100644 index 558f1f8061..0000000000 Binary files a/resources/jquery.ui/themes/vector/images/button-over.png and /dev/null differ diff --git a/resources/jquery.ui/themes/vector/images/button-red-hover-large.png b/resources/jquery.ui/themes/vector/images/button-red-hover-large.png deleted file mode 100644 index 11ccef06b0..0000000000 Binary files a/resources/jquery.ui/themes/vector/images/button-red-hover-large.png and /dev/null differ diff --git a/resources/jquery.ui/themes/vector/images/button-red-hover.png b/resources/jquery.ui/themes/vector/images/button-red-hover.png deleted file mode 100644 index 55a61743ec..0000000000 Binary files a/resources/jquery.ui/themes/vector/images/button-red-hover.png and /dev/null differ diff --git a/resources/jquery.ui/themes/vector/images/button-red-large.png b/resources/jquery.ui/themes/vector/images/button-red-large.png deleted file mode 100644 index 8d089efdb3..0000000000 Binary files a/resources/jquery.ui/themes/vector/images/button-red-large.png and /dev/null differ diff --git a/resources/jquery.ui/themes/vector/images/button-red.png b/resources/jquery.ui/themes/vector/images/button-red.png deleted file mode 100644 index 7a292fc115..0000000000 Binary files a/resources/jquery.ui/themes/vector/images/button-red.png and /dev/null differ diff --git a/resources/jquery.ui/themes/vector/jquery.ui.button.css b/resources/jquery.ui/themes/vector/jquery.ui.button.css old mode 100644 new mode 100755 index a6a1b54430..9314ef6a75 --- a/resources/jquery.ui/themes/vector/jquery.ui.button.css +++ b/resources/jquery.ui/themes/vector/jquery.ui.button.css @@ -29,6 +29,7 @@ button.ui-button-icons-only { .ui-button .ui-button-text { display: block; line-height: 1.4; + text-shadow: 0 1px 1px #fff; } .ui-button-text-only .ui-button-text { padding: 0.3em 1em 0.25em 1em; @@ -98,17 +99,21 @@ button.ui-button::-moz-focus-inner { border: 0; padding: 0; /* reset extra padding in Firefox */ } - -body .ui-button { - margin: 0.5em 0 0.5em 0.4em; - border: 1px solid #a6a6a6 !important; +/* Disables the annoying dashed border Firefox puts on active buttons */ +body button.ui-button::-moz-focus-inner { + border: 0; +} +/* Give large buttons some extra padding */ +body .ui-button-large { + padding: 5px; +} +/* Use white icons for colored buttons */ +.ui-button-green .ui-icon, +.ui-button-blue .ui-icon, +.ui-button-red .ui-icon, +.ui-button-orange .ui-icon { /* @embed */ - background: #f2f2f2 url(images/button-off.png) repeat-x scroll 50% 100% !important; - cursor: pointer; - font-size: 1em; - line-height: 1.4em; - width: auto; - overflow: visible; + background-image: url(images/ui-icons_ffffff_256x240.png) !important; } /* Corner radius */ @@ -124,6 +129,7 @@ body .ui-button { } .ui-button.ui-corner-all, .ui-button.ui-corner-top, + .ui-button.ui-corner-right, .ui-button.ui-corner-tr { -moz-border-radius-topright: 4px; @@ -147,145 +153,230 @@ body .ui-button { border-bottom-right-radius: 4px; } +body .ui-button { + color: #2779aa; + margin: 0.5em 0 0.5em 0.4em; + border: 1px solid #aaa !important; + background: #f0f0f0 !important; + background: -moz-linear-gradient(top, #fff 0%, #ddd 90%) !important; /* FF3.6+ */ + background: -webkit-linear-gradient(top, #fff 0%, #ddd 90%) !important; /* Chrome10+, Safari5.1+ */ + background: -o-linear-gradient(top, #fff 0%, #ddd 90%) !important; /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #fff 0%, #ddd 90%) !important; /* IE10+ */ + background: linear-gradient(to bottom, #fff 0%, #ddd 90%) !important; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dddddd', GradientType=0); /* IE6-8 */ + cursor: pointer; + font-size: 1em; + line-height: 1.4em; + width: auto; + overflow: visible; + -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.2); + -moz-box-shadow: 0 1px 3px rgba(0,0,0,.2); + box-shadow: 0 1px 3px rgba(0,0,0,.2); +} body .ui-button:hover { - border-color: #6e7273; - /* @embed */ - background: #e1e1e1 url(images/button-over.png) repeat-x scroll 50% 100% !important; + color: #2779aa; + border-color: #bbb !important; + background: #fff !important; + background: -moz-linear-gradient(top, #fff 0%, #eee 90%) !important; /* FF3.6+ */ + background: -webkit-linear-gradient(top, #fff 0%, #eee 90%) !important; /* Chrome10+, Safari5.1+ */ + background: -o-linear-gradient(top, #fff 0%, #eee 90%) !important; /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #fff 0%, #eee 90%) !important; /* IE10+ */ + background: linear-gradient(to bottom, #fff 0%, #eee 90%) !important; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0); /* IE6-8 */ + -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.1); + -moz-box-shadow: 0 1px 3px rgba(0,0,0,.1); + box-shadow: 0 1px 3px rgba(0,0,0,.1); } body .ui-button:active, body .ui-button:focus { - border-color: #707271; - /* @embed */ - background: #bfbfbf url(images/button-down.png) repeat-x scroll 50% 100% !important; -} -body .ui-button.disabled { - color: #7f7f7f; - border-color: #cccccc; - /* @embed */ - background: #f2f2f2 url(images/button-disabled.png) repeat-x scroll 50% 100% !important; -} -/* Disables the annoying dashed border Firefox puts on active buttons */ -body button.ui-button::-moz-focus-inner { - border: 0; -} -/* Give large buttons some extra padding */ -body .ui-button-large { - padding: 5px; -} -/* Use white icons for colored buttons */ -.ui-button-green .ui-icon, .ui-button-blue .ui-icon, .ui-button-red .ui-icon, .ui-button-orange .ui-icon { - /* @embed */ - background-image: url(images/ui-icons_ffffff_256x240.png) !important; + border-color: #8ad !important; + -webkit-box-shadow: 0 0 1px 1px rgba(167,215,249,.5); + -moz-box-shadow: 0 0 1px 1px rgba(167,215,249,.5); + box-shadow: 0 0 1px 1px rgba(167,215,249,.5); +} +body .ui-button:active { + background: #e0e0e0 !important; + background: -moz-linear-gradient(top, #f0f0f0 0%, #d0d0d0 90%) !important; /* FF3.6+ */ + background: -webkit-linear-gradient(top, #f0f0f0 0%, #d0d0d0 90%) !important; /* Chrome10+, Safari5.1+ */ + background: -o-linear-gradient(top, #f0f0f0 0%, #d0d0d0 90%) !important; /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #f0f0f0 0%, #d0d0d0 90%) !important; /* IE10+ */ + background: linear-gradient(to bottom, #f0f0f0 0%, #d0d0d0 90%) !important; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f0f0', endColorstr='#d0d0d0', GradientType=0); /* IE6-8 */ } /* Green buttons */ - +body .ui-button-green, +body .ui-button-green .ui-button-text { + color: white; + text-shadow: 0 -1px 1px #072; +} body .ui-button.ui-button-green { - color: white !important; - border-color: #97af7e !important; - /* @embed */ - background: #3cb677 url(images/button-green.png) repeat-x scroll 50% 100% !important; + border-color: #294 !important; + background: #295 !important; + background: -moz-linear-gradient(top, #3c8 0%, #295 90%) !important; /* FF3.6+ */ + background: -webkit-linear-gradient(top, #3c8 0%, #295 90%) !important; /* Chrome10+, Safari5.1+ */ + background: -o-linear-gradient(top, #3c8 0%, #295 90%) !important; /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #3c8 0%, #295 90%) !important; /* IE10+ */ + background: linear-gradient(to bottom, #3c8 0%, #295 90%) !important; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33cc88', endColorstr='#229955', GradientType=0); /* IE6-8 */ + -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.3); + -moz-box-shadow: 0 1px 3px rgba(0,0,0,.3); + box-shadow: 0 1px 3px rgba(0,0,0,.3); } body .ui-button.ui-button-green:hover { - border-color: #778e61 !important; - /* @embed */ - background: #339b65 url(images/button-green-hover.png) repeat-x scroll 50% 100% !important; -} -body .ui-button.ui-button-green.ui-button-large { - /* @embed */ - background: #3cb677 url(images/button-green-large.png) repeat-x scroll 50% 100% !important; -} -body .ui-button.ui-button-green.ui-button-large:hover { - /* @embed */ - background: #339b65 url(images/button-green-hover-large.png) repeat-x scroll 50% 100% !important; -} -body .ui-button.ui-button-green.disabled { - filter:alpha(opacity=50); - -moz-opacity:0.50; - -khtml-opacity: 0.50; - opacity: 0.50; + background: #33a055 !important; + background: -moz-linear-gradient(top, #44d388 0%, #33a055 90%) !important; /* FF3.6+ */ + background: -webkit-linear-gradient(top, #44d388 0%, #33a055 90%) !important; /* Chrome10+, Safari5.1+ */ + background: -o-linear-gradient(top, #44d388 0%, #33a055 90%) !important; /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #44d388 0%, #33a055 90%) !important; /* IE10+ */ + background: linear-gradient(to bottom, #44d388 0%, #33a055 90%) !important; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#44d388', endColorstr='#33a055', GradientType=0); /* IE6-8 */ + -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.25); + -moz-box-shadow: 0 1px 3px rgba(0,0,0,.25); + box-shadow: 0 1px 3px rgba(0,0,0,.25); +} +body .ui-button.ui-button-green:active, +body .ui-button.ui-button-green:focus { + border-color: #172 !important; + -webkit-box-shadow: 0 0 2px 2px rgba(167,215,249,.75); + -moz-box-shadow: 0 0 2px 2px rgba(167,215,249,.75); + box-shadow: 0 0 2px 2px rgba(167,215,249,.75); +} +body .ui-button.ui-button-green:active { + background: #338855 !important; + background: -moz-linear-gradient(top, #30c080 0%, #338855 90%) !important; /* FF3.6+ */ + background: -webkit-linear-gradient(top, #30c080 0%, #338855 90%) !important; /* Chrome10+, Safari5.1+ */ + background: -o-linear-gradient(top, #30c080 0%, #338855 90%) !important; /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #30c080 0%, #338855 90%) !important; /* IE10+ */ + background: linear-gradient(to bottom, #30c080 0%, #338855 90%) !important; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#30c080', endColorstr='#338855', GradientType=0); /* IE6-8 */ } /* Blue buttons */ - +body .ui-button-blue, +body .ui-button-blue .ui-button-text { + color: white; + text-shadow: 0 -1px 1px #037; +} body .ui-button.ui-button-blue { - color: white !important; - border-color: #628acb !important; - /* @embed */ - background: #3365ba url(images/button-blue.png) repeat-x scroll 50% 100% !important; + border-color: #468 !important; + background: #36b !important; + background: -moz-linear-gradient(top, #48e 0%, #36b 90%) !important; /* FF3.6+ */ + background: -webkit-linear-gradient(top, #48e 0%, #36b 90%) !important; /* Chrome10+, Safari5.1+ */ + background: -o-linear-gradient(top, #48e 0%, #36b 90%) !important; /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #48e 0%, #36b 90%) !important; /* IE10+ */ + background: linear-gradient(to bottom, #48e 0%, #36b 90%) !important; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4488ee', endColorstr='#3366bb', GradientType=0); /* IE6-8 */ + -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.35); + -moz-box-shadow: 0 1px 3px rgba(0,0,0,.35); + box-shadow: 0 1px 3px rgba(0,0,0,.35); } body .ui-button.ui-button-blue:hover { - border-color: #5375ad !important; - /* @embed */ - background: #2b569e url(images/button-blue-hover.png) repeat-x scroll 50% 100% !important; -} -body .ui-button.ui-button-blue.ui-button-large { - /* @embed */ - background: #3365ba url(images/button-blue-large.png) repeat-x scroll 50% 100% !important; -} -body .ui-button.ui-button-blue.ui-button-large:hover { - /* @embed */ - background: #2b569e url(images/button-blue-hover-large.png) repeat-x scroll 50% 100% !important; -} -body .ui-button.ui-button-blue.disabled { - filter:alpha(opacity=50); - -moz-opacity:0.50; - -khtml-opacity: 0.50; - opacity: 0.50; + background: #36c !important; + background: -moz-linear-gradient(top, #59e 0%, #36c 90%) !important; /* FF3.6+ */ + background: -webkit-linear-gradient(top, #59e 0%, #36c 90%) !important; /* Chrome10+, Safari5.1+ */ + background: -o-linear-gradient(top, #59e 0%, #36c 90%) !important; /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #59e 0%, #36c 90%) !important; /* IE10+ */ + background: linear-gradient(to bottom, #59e 0%, #36c 90%) !important; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5599ee', endColorstr='#3366cc', GradientType=0); /* IE6-8 */ +} +body .ui-button.ui-button-blue:active, +body .ui-button.ui-button-blue:focus { + border-color: #357 !important; + -webkit-box-shadow: 0 0 2px 2px rgba(167,215,249,.75); + -moz-box-shadow: 0 0 2px 2px rgba(167,215,249,.75); + box-shadow: 0 0 2px 2px rgba(167,215,249,.75); +} +body .ui-button.ui-button-blue:active { + background: #3060a0 !important; + background: -moz-linear-gradient(top, #4080e0 0%, #3060a0 90%) !important; /* FF3.6+ */ + background: -webkit-linear-gradient(top, #4080e0 0%, #3060a0 90%) !important; /* Chrome10+, Safari5.1+ */ + background: -o-linear-gradient(top, #4080e0 0%, #3060a0 90%) !important; /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #4080e0 0%, #3060a0 90%) !important; /* IE10+ */ + background: linear-gradient(to bottom, #4080e0 0%, #3060a0 90%) !important; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4080e0', endColorstr='#3060a0', GradientType=0); /* IE6-8 */ } /* Red buttons */ - +body .ui-button-red, +body .ui-button-red .ui-button-text { + color: white; + text-shadow: 0 -1px 1px #700; +} body .ui-button.ui-button-red { - color: white !important; - border-color: #af977e !important; - /* @embed */ - background: #cb0000 url(images/button-red.png) repeat-x scroll 50% 100% !important; + border-color: #944 !important; + background: #a22 !important; + background: -moz-linear-gradient(top, #d44 0%, #a22 90%) !important; /* FF3.6+ */ + background: -webkit-linear-gradient(top, #d44 0%, #a22 90%) !important; /* Chrome10+, Safari5.1+ */ + background: -o-linear-gradient(top, #d44 0%, #a22 90%) !important; /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #d44 0%, #a22 90%) !important; /* IE10+ */ + background: linear-gradient(to bottom, #d44 0%, #a22 90%) !important; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dd4444', endColorstr='#aa2222', GradientType=0); /* IE6-8 */ + -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.35); + -moz-box-shadow: 0 1px 3px rgba(0,0,0,.35); + box-shadow: 0 1px 3px rgba(0,0,0,.35); } body .ui-button.ui-button-red:hover { - border-color: #8e7761 !important; - /* @embed */ - background: #ad0000 url(images/button-red-hover.png) repeat-x scroll 50% 100% !important; -} -body .ui-button.ui-button-red.ui-button-large { - /* @embed */ - background: #cb0000 url(images/button-red.png) repeat-x scroll 50% 100% !important; -} -body .ui-button.ui-button-red.ui-button-large:hover { - /* @embed */ - background: #ad0000 url(images/button-red-hover.png) repeat-x scroll 50% 100% !important; -} -body .ui-button.ui-button-red.disabled { - filter:alpha(opacity=50); - -moz-opacity:0.50; - -khtml-opacity: 0.50; - opacity: 0.50; + border-color: #a44 !important; + background: #b03333 !important; + background: -moz-linear-gradient(top, #ee4646 0%, #b03333 90%) !important; /* FF3.6+ */ + background: -webkit-linear-gradient(top, #ee4646 0%, #b03333 90%) !important; /* Chrome10+, Safari5.1+ */ + background: -o-linear-gradient(top, #ee4646 0%, #b03333 90%) !important; /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #ee4646 0%, #b03333 90%) !important; /* IE10+ */ + background: linear-gradient(to bottom, #ee4646 0%, #b03333 90%) !important; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee4646', endColorstr='#b03333', GradientType=0); /* IE6-8 */ + -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.3); + -moz-box-shadow: 0 1px 3px rgba(0,0,0,.3); + box-shadow: 0 1px 3px rgba(0,0,0,.3); +} +body .ui-button.ui-button-red:active, +body .ui-button.ui-button-red:focus { + border-color: #747 !important; + -webkit-box-shadow: 0 0 2px 2px rgba(167,215,249,.7); + -moz-box-shadow: 0 0 2px 2px rgba(167,215,249,.7); + box-shadow: 0 0 2px 2px rgba(167,215,249,.7); +} +body .ui-button.ui-button-red:active { + background: #952020 !important; + background: -moz-linear-gradient(top, #d04545 0%, #952020 90%) !important; /* FF3.6+ */ + background: -webkit-linear-gradient(top, #d04545 0%, #952020 90%) !important; /* Chrome10+, Safari5.1+ */ + background: -o-linear-gradient(top, #d04545 0%, #952020 90%) !important; /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #d04545 0%, #952020 90%) !important; /* IE10+ */ + background: linear-gradient(to bottom, #d04545 0%, #952020 90%) !important; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d04545', endColorstr='#952020', GradientType=0); /* IE6-8 */ } -/* Orange buttons */ - -body .ui-button.ui-button-orange { - color: white !important; - border-color: #f3a863 !important; - /* @embed */ - background: #f07f14 url(images/button-orange.png) repeat-x scroll 50% 100% !important; -} -body .ui-button.ui-button-orange:hover { - border-color: #ce9055 !important; - /* @embed */ - background: #cc6c11 url(images/button-orange-hover.png) repeat-x scroll 50% 100% !important; -} -body .ui-button.ui-button-orange.ui-button-large { - /* @embed */ - background: #f07f14 url(images/button-orange-large.png) repeat-x scroll 50% 100% !important; -} -body .ui-button.ui-button-orange.ui-button-large:hover { - /* @embed */ - background: #cc6c11 url(images/button-orange-hover-large.png) repeat-x scroll 50% 100% !important; -} -body .ui-button.ui-button-orange.disabled { - filter:alpha(opacity=50); - -moz-opacity:0.50; - -khtml-opacity: 0.50; - opacity: 0.50; -} +/* Disabled buttons */ +body .ui-button-green.disabled, +body .ui-button-green.disabled:hover, +body .ui-button-green.disabled:active, +body .ui-button-green.disabled:focus, +body .ui-button-blue.disabled, +body .ui-button-blue.disabled:hover, +body .ui-button-blue.disabled:active, +body .ui-button-blue.disabled:focus, +body .ui-button-red.disabled, +body .ui-button-red.disabled:hover, +body .ui-button-red.disabled:active, +body .ui-button-red.disabled:focus, +body .ui-button.disabled, +body .ui-button.disabled:hover { + color: #aaa; + border-color: #ccc !important; + background: #eee !important; + background: -moz-linear-gradient(top, #f6f6f6 0%, #eee 90%) !important; /* FF3.6+ */ + background: -webkit-linear-gradient(top, #f6f6f6 0%, #eee 90%) !important; /* Chrome10+, Safari5.1+ */ + background: -o-linear-gradient(top, #f6f6f6 0%, #eee 90%) !important; /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #f6f6f6 0%, #eee 90%) !important; /* IE10+ */ + background: linear-gradient(to bottom, #f6f6f6 0%, #eee 90%) !important; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#eeeeee', GradientType=0); /* IE6-8 */ + -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0); + -moz-box-shadow: 0 1px 3px rgba(0,0,0,0); + box-shadow: 0 1px 3px rgba(0,0,0,0); +} +body .ui-button-green.disabled .ui-button-text, +body .ui-button-blue.disabled .ui-button-text, +body .ui-button-red.disabled .ui-button-text { + color: #aaa; + text-shadow: 0 1px 1px #fff; +} \ No newline at end of file