# HG changeset patch
# User Steve Losh <steve@stevelosh.com>
# Date 1276385587 14400
# Node ID cd17a814bf17985fec4bbf6066cd6559f469835e
# Parent  eaa63ba9a24ea418b52fb490f2624cf2a7daff34
web: more styling

diff -r eaa63ba9a24e -r cd17a814bf17 review/static/style.css
--- 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;
+}
diff -r eaa63ba9a24e -r cd17a814bf17 review/static/style.less
--- 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;
+            }
+        }
+    }
 }
diff -r eaa63ba9a24e -r cd17a814bf17 review/templates/base.html
--- a/review/templates/base.html	Sat Jun 12 18:13:37 2010 -0400
+++ b/review/templates/base.html	Sat Jun 12 19:33:07 2010 -0400
@@ -16,10 +16,9 @@
     </head>
 
     <body id="{% block id %}{% endblock %}">
+        <div class="hr one">&nbsp;</div>
+        <div class="hr two">&nbsp;</div>
         <div class="header group">
-            <div class="hr one">&nbsp;</div>
-            <div class="hr two">&nbsp;</div>
-
             <div class="wrap">
                 <h1>
                     Reviewing