From 3e5ad5dc875e0e07e9a4d88dbec8dd3330eed961 Mon Sep 17 00:00:00 2001
From: Sawyer Hollenshead <s.hollenshead@gmail.com>
Date: Fri, 29 Jun 2012 13:31:46 -0700
Subject: [PATCH] Button styles
---
resources/static/common/css/style.css | 80 ++++++++++++------
.../static/common/i/button-arrow-active.png | Bin 0 -> 1177 bytes
.../static/common/i/button-arrow-hover.png | Bin 0 -> 1454 bytes
3 files changed, 53 insertions(+), 27 deletions(-)
create mode 100644 resources/static/common/i/button-arrow-active.png
create mode 100644 resources/static/common/i/button-arrow-hover.png
diff --git a/resources/static/common/css/style.css b/resources/static/common/css/style.css
index dfd8cd6d3..26837089e 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
GIT binary patch
literal 1177
zcmeAS@N?(olHy`uVBq!ia0vp^azL!f!3HFi{AX?lQj#UE5hcO-X(i=}MX3yqDfvmM
z3ZA)%>8U}fi7AzZCsS=07?@QuLn2Bde0{8v^K<nQL2C3WatnaE85nHrD+&^mvr|hH
zl2X$%^K6yg@7}MZkeOnu6mIHk;9KCFnvv;IRg@ZB<rk7%m7Q#vqGWHUU{hfQG$1#%
zBvGLvHz%*ys=`(YY_1iM4HDK@QUEI{$+lI3I4Z(7K*2e`C{@8!&saCvz|c^^%uLVF
z#MI2pP)EVYz|ctF0Eo<V4Na^}&8&>f6`()~Xj@TAnpKdC8`Lf!&sHg;q@=(~U%$M(
zT(8_%FTW^V-_X+15@d#vkuFe$ZgFK^Nn(X=Ua>OF1ees}<f6=ilFa-(1(1n}N%^HE
zwn{*kLcEY$05>+T7#d8#0MoBXEYLU9GXQxBrqI_HztY@Xxa#7Ppj3o=u^L<)Qdy9y
zACy|0Us{w5jJPyqkW~d%&PAz-CHX}m`T04pPz=b(FUc>?$S+WE4mMNJ@J&q4%mWE%
zf_3=%T6yLbmn7yTr+T{BDgn*V%gju%a&mNZay55zadI?qG&FQIv~V=BbOqARMn<Ma
z25v4ey)OC5rManjB{01y2)(X2^@0*ZZUN9{m(-%nveXo}qWoM1u&1pual6F{r+HAl
zDY)I@j8m^Z&@uX;s6~oum=G}ifSB-v3*^9)erg^ty%zx!_S*;9ml+rsxjkJRLn>|^
znQ@T!kO7bD@3lS$*6JLZ%Xd)JjhT&cTcf6vQeno@RW~-uhHnZ9Esfj%*vfB%^_))v
z1%ZYxjqMy2vlL&)zGIK;dds$aYI^LUc^mo)!{?c?>^gLL{()Twg_E6PAGjK7Pe1ce
zr9%8zq^{I?A4}683Qikm76tt{^x3{F*w6He)bBm-GCnGIyHwiePdH!btJiz>A(Q=~
z{6$f@3;z_dUhj`Kio9N7lm4#a<SK!_;MT4%b=yk&*i9ueQ}nME6`!B9vMI|utxsd-
ztEC%NclumQUYWG{oBN_0Tb@7CGJ9{N$#g0+|8JQPM?;=w+5J^PEG4?Df6wJmV6fsZ
l{jR)xmm$C9^Iu#B3@WpAS^cj&0gDj^22WQ%mvv4FO#n$?lAr(p
literal 0
HcmV?d00001
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
GIT binary patch
literal 1454
zcmeAS@N?(olHy`uVBq!ia0vp^azL!f!3HFi{AX?lQj#UE5hcO-X(i=}MX3yqDfvmM
z3ZA)%>8U}fi7AzZCsS=07?@QuLn2Bde0{8v^K<nQL2C3WatnaE85nHrD+&^mvr|hH
zl2X$%^K6yg@7}MZkeOnu6mIHk;9KCFnvv;IRg@ZB<rk7%m7Q#vqGWHUU{hfQG$1#%
zBvGLvHz%*ys=`(YY_1iM4HDK@QUEI{$+lI3I4Z(7K*2e`C{@8!&saCvz|c^^%uLVF
z#MI2pP)EVYz|ctF0Eo<V4Na^}&8&>f6`()~Xj@TAnpKdC8`Lf!&sHg;q@=(~U%$M(
zT(8_%FTW^V-_X+15@d#vkuFe$ZgFK^Nn(X=Ua>OF1ees}<f6=ilFa-(1(1n}N%^HE
zwn{*kLcEY$05>+T7#d8#0MoBXEYLU9GXQxBrqI_HztY@Xxa#7Ppj3o=u^L<)Qdy9y
zACy|0Us{w5jJPyqkW~d%&PAz-CHX}m`T04pPz=b(FUc>?$S+WE4mMNJ@J&q4%mWE%
zf_3=%T6yLbmn7yTr+T{BDgn*V%gju%GIeuvc6PBeb8<9sHZ*iKv~V=BbOqARMn<Ma
z25v4ey)OC5rManjB{01y2)*Vw^@0*ZZUN9{m(-%nveXo}qWoM1u&1puvAD&_(b37(
z+|3PWo+Ea*K=h_yaSK?lg@FN1z4}1M=!2pbDXL*Y!1M!R!V@l#15f&?dBF5u1Wec-
ze79aOFfb{2x;TbZ+}bnawAWz=k+$<bx!G&O919-b+N~G6<3pRmqo{yDL3t+;mn*G{
zI_%n=_I~9I*|TQPo7nP~P8n-&q#T>vxl*v%*J!fkQ-duRYJUE=Og9oXDyTTgxOnSM
z!4kH!e%l2dO8$N2wdmV5>B;BHLiS*HeHji1?_js?M_e~}^UtMxX}bI2*e|xd3FbC)
z*Y&U4v8V3Lxf`tEI${To7<PRLi3zOxqZFkZH~ZS+9gF_#zIsaDHNj$)Pt@CUGPiwO
zigO%7J^$WFI&5jsvO3Cf#eK_@=e7y=$<0&^>06w0NrAP{=(?lM?3TBa<fXPq`9HVr
zd^#<%YWgZYsb!+)#H?E1vK_K)4)8qu?cvWP@x&g-ogoa_JhMX51W)LGt<lzZi;ju=
zxWTTkpzQ-w8RzG@AxA%b-(l#urdyIRXZfmY_m-da+<nXb-q(n?eb3i=ChmUmS?ht+
z)Cc>v&Z(GnRH!uJ?t%J+Ja=|iB|1+obqd@X!1ONCQe0)0N9UoB!j~Srd%BtHN`H{*
zgN@DA;!{|E<!5}j@o#R!q!cfk8_jMSA70#ByVgYVOq}M26YqRiSWac)e;;@ILWS3w
z?M4r!ZMGDDWu6)!#bL9f_GQqisX7){zRyt#x!rcJ>Cv(<%P;Y(Wi=+W>=nPpShir!
zk&m;hR;b@-H0ro{`(VeSW5TCC6!2VhtZ$TEktrLeyy-jtjYg@|;M=d4MXbA%FMI#M
h50fqXp8pa`V0isX)s!zmDHK$Kdb;|#taD0e0sy@6DDwaS
literal 0
HcmV?d00001
--
GitLab