diff --git a/resources/static/common/css/style.css b/resources/static/common/css/style.css
index dfd8cd6d3bfbeb86b3bf7b3814a612276db5b020..26837089ebd32bb20a5a15d98ab49e943a989e49 100644
--- a/resources/static/common/css/style.css
+++ b/resources/static/common/css/style.css
@@ -143,6 +143,7 @@ input[type=checkbox] {
button,
.button {
font-size: 14px;
+ font-weight: bold;
line-height: 14px;
/* The difference between top and bottom padding is to make up for the tiny
* offset that browsers use to display lowercase letters.
@@ -151,12 +152,12 @@ button,
float: right;
border: 0;
color: #fff;
- text-shadow: 0 1px 0 #888, 0 0 2px rgba(255,255,255,.2);
+ text-shadow: 0 1px rgba(0,0,0,0.5);
cursor: pointer;
white-space: nowrap;
border-radius: 3px;
- border-bottom: 1px solid #888;
+ box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3), 0 1px 0 rgba(0, 0, 0, 0.2);
background-color: #4eb5e5;
background-image: -webkit-gradient(linear, left top, left bottom, from(#4eb5e5), to(#3196cf));
@@ -171,13 +172,15 @@ button:hover,
button:focus,
.button:hover,
.button:focus {
- background-color: #43a6e2;
- background-image: -webkit-gradient(linear, left top, left bottom, from(#43a6e2), to(#277ac1));
- background-image: -webkit-linear-gradient(top, #43a6e2, #277ac1);
- background-image: -moz-linear-gradient(top, #43a6e2, #277ac1);
- background-image: -ms-linear-gradient(top, #43a6e2, #277ac1);
- background-image: -o-linear-gradient(top, #43a6e2, #277ac1);
- background-image: linear-gradient(top, #43a6e2, #277ac1);
+ box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3), 0 1px 0 rgba(0, 0, 0, 0.2), 0 2px 0 rgba(0, 0, 0, 0.1);
+
+ background-color: #4aafe5;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#4aafe5), to(#2c89c8));
+ background-image: -webkit-linear-gradient(top, #4aafe5, #2c89c8);
+ background-image: -moz-linear-gradient(top, #4aafe5, #2c89c8);
+ background-image: -ms-linear-gradient(top, #4aafe5, #2c89c8);
+ background-image: -o-linear-gradient(top, #4aafe5, #2c89c8);
+ background-image: linear-gradient(top, #4aafe5, #2c89c8);
}
button:focus,
@@ -196,8 +199,8 @@ button:active,
background-image: -o-linear-gradient(top, #184a73, #276084);
background-image: linear-gradient(top, #184a73, #276084);
color: #97b6ca;
- text-shadow: 0 1px #143348;
- box-shadow: 0 0 5px #003763 inset;
+ text-shadow: 0 1px rgba(0,0,0,0.4);
+ box-shadow: inset 0 2px 1px rgba(0,0,0,0.3);
}
button::-moz-focus-inner, .button::-moz-focus-inner {
@@ -220,19 +223,29 @@ button::-moz-focus-inner, .button::-moz-focus-inner {
background-position: center right, center;
}
-
.submit button:hover,
.submit button:focus,
.submit .button:hover,
.submit .button:focus {
- background-color: #43a6e2;
- background-image: url("/common/i/button-arrow.png");
- background-image: url("/common/i/button-arrow.png"), -webkit-gradient(linear, left top, left bottom, from(#43a6e2), to(#277ac1));
- background-image: url("/common/i/button-arrow.png"), -webkit-linear-gradient(top, #43a6e2, #277ac1);
- background-image: url("/common/i/button-arrow.png"), -moz-linear-gradient(top, #43a6e2, #277ac1);
- background-image: url("/common/i/button-arrow.png"), -ms-linear-gradient(top, #43a6e2, #277ac1);
- background-image: url("/common/i/button-arrow.png"), -o-linear-gradient(top, #43a6e2, #277ac1);
- background-image: url("/common/i/button-arrow.png"), linear-gradient(top, #43a6e2, #277ac1);
+ background-color: #4aafe5;
+ background-image: url("/common/i/button-arrow-hover.png");
+ background-image: url("/common/i/button-arrow.png"), -webkit-gradient(linear, left top, left bottom, from(#4aafe5), to(#2c89c8));
+ background-image: url("/common/i/button-arrow.png"), -webkit-linear-gradient(top, #4aafe5, #2c89c8);
+ background-image: url("/common/i/button-arrow.png"), -moz-linear-gradient(top, #4aafe5, #2c89c8);
+ background-image: url("/common/i/button-arrow.png"), -ms-linear-gradient(top, #4aafe5, #2c89c8);
+ background-image: url("/common/i/button-arrow.png"), -o-linear-gradient(top, #4aafe5, #2c89c8);
+ background-image: url("/common/i/button-arrow.png"), linear-gradient(top, #4aafe5, #2c89c8);
+}
+
+.submit button:active,
+.submit .button:active {
+ background-color: #184a73;
+ background-image: url("/common/i/button-arrow-active.png"), -webkit-gradient(linear, left top, left bottom, from(#184a73), to(#276084));
+ background-image: url("/common/i/button-arrow-active.png"), -webkit-linear-gradient(top, #184a73, #276084);
+ background-image: url("/common/i/button-arrow-active.png"), -moz-linear-gradient(top, #184a73, #276084);
+ background-image: url("/common/i/button-arrow-active.png"), -ms-linear-gradient(top, #184a73, #276084);
+ background-image: url("/common/i/button-arrow-active.png"), -o-linear-gradient(top, #184a73, #276084);
+ background-image: url("/common/i/button-arrow-active.png"), linear-gradient(top, #184a73, #276084);
}
button[disabled], .submit_disabled button, .submit_disabled .button,
@@ -268,18 +281,31 @@ button.negative:hover,
button.negative:focus,
.button.negative:hover,
.button.negative:focus {
- background-color: #ad1804;
- background-image: -webkit-gradient(linear, left top, left bottom, from(#ad1804), to(#911403));
- background-image: -webkit-linear-gradient(top, #ad1804, #911403);
- background-image: -moz-linear-gradient(top, #ad1804, #911403);
- background-image: -ms-linear-gradient(top, #ad1804, #911403);
- background-image: -o-linear-gradient(top, #ad1804, #911403);
- background-image: linear-gradient(top, #ad1804, #911403);
+ background-color: #e3653f;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#e3653f), to(#c01c03));
+ background-image: -webkit-linear-gradient(top, #e3653f, #c01c03);
+ background-image: -moz-linear-gradient(top, #e3653f, #c01c03);
+ background-image: -ms-linear-gradient(top, #e3653f, #c01c03);
+ background-image: -o-linear-gradient(top, #e3653f, #c01c03);
+ background-image: linear-gradient(top, #e3653f, #c01c03);
}
button.negative:active,
.button.negative:active {
box-shadow: 0 0 5px #333 inset;
+ color: #cfa391;
+
+ background-color: #83311e;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#83311e), to(#670d01));
+ background-image: -webkit-linear-gradient(top, #83311e, #670d01);
+ background-image: -moz-linear-gradient(top, #83311e, #670d01);
+ background-image: -ms-linear-gradient(top, #83311e, #670d01);
+ background-image: -o-linear-gradient(top, #83311e, #670d01);
+ background-image: linear-gradient(top, #83311e, #670d01);
+}
+
+button.loading, input[type="submit"].loading{
+
}
.submit #cancel {
diff --git a/resources/static/common/i/button-arrow-active.png b/resources/static/common/i/button-arrow-active.png
new file mode 100644
index 0000000000000000000000000000000000000000..6d8b4b1ebee6f2c6e86609b68187b1bc7e8a6aee
Binary files /dev/null and b/resources/static/common/i/button-arrow-active.png differ
diff --git a/resources/static/common/i/button-arrow-hover.png b/resources/static/common/i/button-arrow-hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..0f16a66797ce4ce0e21223d4d8a873c4064164ed
Binary files /dev/null and b/resources/static/common/i/button-arrow-hover.png differ