Parametrise various colors

diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index aad4d128eaefb5eaa78ba238a7a3ebe083654ba5..85b8f26a9448e8f5d62c9f136eab3202273d4b95 100644 (file)
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -2,6 +2,11 @@
 $lineheight: 20px;
 $typeheight: 14px;
 
+$offwhite: #f4f4ff;
+$blue: #7092FF;
+$grey: #AAA;
+$hovercolor: 20%;
+
 /* Styles common to large and small screens */
 
 /* Minimal CSS reset */
@@ -375,7 +380,7 @@ table {
 .deemphasize {
   color: #999;
   a {
-    color: #7092FF;
+    color: $blue;
   }
 }
 
@@ -610,7 +615,7 @@ table {
     position: relative;
     padding: $lineheight/2 $lineheight;
     z-index: 9999;
-    background: #F4F4FF;
+    background: $offwhite;
     border-bottom: 1px solid #ccc;
   }
   h4 {
@@ -828,7 +833,7 @@ ul.results-list li { border-bottom: 1px solid #ccc; }
 .content-heading {
   position: relative;
   padding: $lineheight;
-  background: #F4F4FF;
+  background: $offwhite;
   h1, h2 {
     margin-bottom: $lineheight/2;
     line-height: 100%;
@@ -1252,9 +1257,9 @@ ul.results-list li { border-bottom: 1px solid #ccc; }
       float: left;
     }
     #decline {
-      background: #AAA;
+      background: $grey;
       &:hover {
-        background: #777;
+        background: darken($grey, $hovercolor);
       }
     }
   }
@@ -1262,7 +1267,7 @@ ul.results-list li { border-bottom: 1px solid #ccc; }
     margin-bottom: $lineheight;
   }
   #contributorGuidance {
-    background-color: #f4f4ff;
+    background-color: $offwhite;
     border-radius: 4px;
     -moz-border-radius: 4px;
   }
@@ -1531,12 +1536,12 @@ a.button {
   min-width: 120px;
   margin-bottom: $lineheight/2;
   color: white;
-  background: #7092FF;
+  background: $blue;
   text-align: center;
   border-radius: 2px;
   -moz-border-radius: 2px;
   &:hover {
-    background: blue;
+    background: darken($blue, $hovercolor);
     text-decoration: none;
   }
   &:last-child {
@@ -1555,7 +1560,7 @@ a.button.submit {
 
 .table0,
 .item0 {
-  background: #F4F4FF;
+  background: $offwhite;
 }
 
 .table1,
@@ -1609,14 +1614,14 @@ a.button.submit {
 
   img {
     padding: $lineheight;
-    background-color: #f4f4ff;
+    background-color: $offwhite;
     display: block;
     max-width: 100%;
     margin: auto;
   }
 
   blockquote {
-    border-left: $lineheight solid #f4f4ff;
+    border-left: $lineheight solid $offwhite;
     padding-left: $lineheight;
     margin: 0;
     color: #7E7E7E;
@@ -1657,7 +1662,7 @@ a.button.submit {
     .richtext_preview {
       display: inline-block;
       padding: $lineheight;
-      background-color: #f4f4ff;
+      background-color: $offwhite;
       overflow-x: auto;
 
       &.loading {