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 (file)
index 8f7cf74..0000000
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 (file)
index 1fc2816..0000000
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 (file)
index 22ee5e5..0000000
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 (file)
index 2e6d121..0000000
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 (file)
index 28eb1fc..0000000
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 (file)
index 0e29d85..0000000
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 (file)
index ede6998..0000000
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 (file)
index e4e4ec1..0000000
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 (file)
index 766e574..0000000
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 (file)
index 90969c3..0000000
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 (file)
index f625729..0000000
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 (file)
index c646757..0000000
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 (file)
index dd8851e..0000000
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 (file)
index 19c3991..0000000
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 (file)
index a8e830e..0000000
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 (file)
index 54c418e..0000000
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 (file)
index f76f7b0..0000000
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 (file)
index f997431..0000000
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 (file)
index 82dedb5..0000000
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 (file)
index 109907f..0000000
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 (file)
index 5a85b8a..0000000
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 (file)
index cc5eb11..0000000
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 (file)
index 6f0dbd5..0000000
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 (file)
index a1077c5..0000000
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 (file)
index 3d7f37f..0000000
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 (file)
index 02347cf..0000000
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 (file)
index 9edb7aa..0000000
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 (file)
index 47a0b1b..0000000
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 (file)
index a244536..0000000
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 (file)
index 558f1f8..0000000
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 (file)
index 11ccef0..0000000
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 (file)
index 55a6174..0000000
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 (file)
index 8d089ef..0000000
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 (file)
index 7a292fc..0000000
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 (file)
new mode 100755 (executable)
index a6a1b54..9314ef6
--- 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