--- a/review/static/style.css Sat Jun 12 18:13:37 2010 -0400
+++ b/review/static/style.css Sat Jun 12 19:33:07 2010 -0400
@@ -27,26 +27,26 @@
width: 800px;
margin: 0 auto;
}
-body .header {
- background-color: #648239;
- padding-bottom: 1px;
- border-bottom: 1px solid #5a7533;
-}
-body .header .hr.one {
+body .hr.one {
border-top: none;
height: 3px;
background-color: #87b04d;
border-bottom: 1px solid #648239;
}
-body .header .hr.two {
+body .hr.two {
border-top: none;
border-bottom: 1px solid #94b95f;
}
+body .header {
+ background-color: #648239;
+ border-bottom: 1px solid #5a7533;
+}
body .header h1 {
color: #292620;
text-shadow: 0px 1px 1px #94b95f;
- margin-top: 16px;
float: right;
+ line-height: 60px;
+ margin: 0 10px 0 0;
}
body .header h1 a {
color: black;
@@ -56,7 +56,7 @@
text-decoration: underline;
}
body .header .remotes .remote {
- padding-top: 4px;
+ padding-top: 6px;
}
body .header .remotes form {
display: inline;
@@ -64,38 +64,41 @@
}
body .header .remotes form a {
font: bold 12px "Helvetica Neue", HelveticaNeue, Arial, Helvetica, sans-serif;
- color: #000000;
+ color: #212000;
line-height: 1.45;
display: inline-block;
text-decoration: none;
padding: 1px;
- background-color: #c9e69f;
+ background-color: #f9f8d3;
+ box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
+ -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
+ -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
- border-top: 1px solid #729c35;
- border-right: 1px solid #62862e;
- border-left: 1px solid #62862e;
- border-bottom: 1px solid #516f26;
-}
-body .header .remotes form a:hover {
- border-top: 1px solid #82b23d;
- border-right: 1px solid #729c35;
- border-left: 1px solid #729c35;
- border-bottom: 1px solid #62862e;
- background-color: #daeebe;
+ border-top: 1px solid #bab994;
+ border-right: 1px solid #a9a883;
+ border-left: 1px solid #a9a883;
+ border-bottom: 1px solid #989772;
}
body .header .remotes form a span {
- background-color: #9fc962;
+ background-color: #edecc7;
display: inline-block;
padding: 0 6px;
- text-shadow: 0px 1px 1px #a6cd6d;
+ text-shadow: 0px 1px 1px #fffffa;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
-body .header .remotes form a span:hover {
- background-color: #bad98f;
+body .header .remotes form a:hover {
+ border-top: 1px solid #dddbac;
+ border-right: 1px solid #c8c695;
+ border-left: 1px solid #c8c695;
+ border-bottom: 1px solid #aead83;
+ background-color: #fefdd8;
+}
+body .header .remotes form a:hover span {
+ background-color: #fefdd8;
}
body .header .remotes form a:active {
margin-top: 1px;
@@ -105,6 +108,7 @@
border-top: 1px solid #f8f7e8;
}
body .content .wrap {
+ border: 1px solid #d8d685;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
@@ -113,3 +117,15 @@
width: 760px;
background-color: #fdfdfd;
}
+body .footer {
+ text-align: center;
+ margin-top: 14px;
+}
+body .footer a {
+ color: #292620;
+ font-weight: bold;
+ text-decoration: none;
+}
+body .footer a:hover {
+ color: #bf4c18;
+}
--- a/review/static/style.less Sat Jun 12 18:13:37 2010 -0400
+++ b/review/static/style.less Sat Jun 12 19:33:07 2010 -0400
@@ -4,6 +4,9 @@
@c-cream: #edecc7;
@c-green: #648239;
@c-orange: #bf4c18;
+@c-green-light: #9AF040;
+@c-orange-light: #FF6F24;
+
@c-dark: #292620;
@c-light: #fcfcfc;
@@ -14,6 +17,11 @@
-moz-border-radius: @radius;
border-radius: @radius;
}
+.box-shadow(@horiz, @vert, @blur, @color) {
+ box-shadow: @horiz @vert @blur @color;
+ -moz-box-shadow: @horiz @vert @blur @color;
+ -webkit-box-shadow: @horiz @vert @blur @color;
+}
.multi-border(@top, @sides, @bottom) {
border-top: 1px solid @top;
border-right: 1px solid @sides;
@@ -27,21 +35,23 @@
display: inline-block;
text-decoration: none;
padding: 1px;
- background-color: saturate(lighten(@color, 30%), 10%);
+ background-color: @color + #0c0c0c;
+ .box-shadow(0px, 1px, 2px, rgba(0,0,0,0.5));
.border-radius(4px);
- .multi-border(darken(@color, 30%), darken(@color, 40%), darken(@color, 50%));
- &:hover {
- .multi-border(darken(@color, 20%), darken(@color, 30%), darken(@color, 40%));
- background-color: lighten(saturate(lighten(@color, 30%), 10%), 10%);
- }
+ .multi-border((@color - #333), (@color - #444), (@color - #555));
+
span {
background-color: @color;
display: inline-block;
padding: 0 @fsize/2;
- text-shadow: 0px 1px 1px lighten(@color, 5%);
+ text-shadow: 0px 1px 1px (@color + #333);
.border-radius(3px);
- &:hover {
- background-color: lighten(@color, 20%);
+ }
+ &:hover {
+ .multi-border(desaturate(darken(@color, 10%), 10%), desaturate(darken(@color, 20%), 20%), desaturate(darken(@color, 30%), 30%));
+ background-color: @color + #111;
+ span {
+ background-color: @color + #111;
}
}
&:active {
@@ -73,26 +83,26 @@
width: @content-width;
margin: 0 auto;
}
+ .hr.one {
+ border-top: none;
+ height: 3px;
+ background-color: lighten(@c-green, 35%);
+ border-bottom: 1px solid @c-green;
+ }
+ .hr.two {
+ border-top: none;
+ border-bottom: 1px solid lighten(@c-green, 50%);
+ }
.header {
background-color: @c-green;
- padding-bottom: 1px;
border-bottom: 1px solid darken(@c-green, 10%);
- .hr.one {
- border-top: none;
- height: 3px;
- background-color: lighten(@c-green, 35%);
- border-bottom: 1px solid @c-green;
- }
- .hr.two {
- border-top: none;
- border-bottom: 1px solid lighten(@c-green, 50%);
- }
h1 {
color: @c-dark;
text-shadow: 0px 1px 1px lighten(@c-green, 50%);
- margin-top: 16px;
float: right;
+ line-height: 60px;
+ margin: 0 10px 0 0;
a {
color: black;
@@ -105,14 +115,14 @@
}
.remotes {
.remote {
- padding-top: 4px;
+ padding-top: 6px;
}
form {
display: inline;
margin-bottom: 0;
a {
- .button(saturate(lighten(@c-green, 60%), 10%), #000, 12px, 1.45);
+ .button(@c-cream, #000, 12px, 1.45);
}
}
}
@@ -121,6 +131,7 @@
border-top: 1px solid lighten(@c-cream, 10%);
.wrap {
+ border: 1px solid darken(@c-cream, 20%);
.border-radius(7px);
@content-padding-horiz: 20px;
@@ -130,4 +141,18 @@
background-color: #fdfdfd;
}
}
+ .footer {
+ text-align: center;
+ margin-top: 14px;
+
+ a {
+ color: @c-dark;
+ font-weight: bold;
+ text-decoration: none;
+
+ &:hover {
+ color: @c-orange;
+ }
+ }
+ }
}