Make contact sync button quieter

// FREEBIE

background.html

@@ -395,7 +395,7 @@
       </div>
       <textarea rows='5'></textarea>
       <div class='buttons'>
-        <button class='submit'>{{ submit }}</button>
+        <button class='grey submit'>{{ submit }}</button>
       </div>
       <div class='result'>
       </div>
@@ -456,7 +456,7 @@
       <hr>
       <h3>{{ sync }}</h3>
       <div>
-        <button class='sync'>{{ syncNow }}</button>
+        <button class='grey sync'>{{ syncNow }}</button>
         <p>
           {{ syncExplanation }}
           <div class='synced_at'>

stylesheets/_debugLog.scss

@@ -19,23 +19,6 @@
     }
   }
 
-  .submit {
-    border-radius: $border-radius;
-    border: solid 1px #ccc;
-    cursor: pointer;
-    margin: 1em auto;
-    padding: 1em;
-    font-family: inherit;
-    color: $grey;
-    background: $grey_l;
-    box-shadow: 0 0 10px -5px rgba($grey, 0.5);
-
-    &:hover {
-      color: black;
-      box-shadow: 0 0 10px -3px rgba($grey, 0.7);
-    }
-  }
-
   .result {
     $link-max-width: 400px;
     $open-width: 72px;

stylesheets/_global.scss

@@ -52,6 +52,30 @@ button {
   cursor: pointer;
   font-size: inherit;
 }
+button.grey {
+  border-radius: $border-radius;
+  border: solid 1px #ccc;
+  cursor: pointer;
+  margin: 1em auto;
+  padding: 1em;
+  font-family: inherit;
+  color: $grey;
+  background: $grey_l;
+  box-shadow: 0 0 10px -5px rgba($grey, 0.5);
+
+  &:hover {
+    box-shadow: 0 0 10px -3px rgba($grey, 0.7);
+  }
+
+  &[disabled=disabled] {
+    &, &:hover {
+      opacity: 0.5;
+      box-shadow: none;
+      cursor: default;
+    }
+  }
+}
+
 a { color: $blue; }
 
 .inactive button.back {

stylesheets/_index.scss

@@ -261,19 +261,9 @@ input.search {
 .syncSettings {
   button {
     float: right;
-    border: none;
-    border-radius: $border-radius;
-    color: white;
-    font-weight: bold;
     line-height: 36px;
     padding: 0 20px;
-    background: $blue;
-    margin-left: 20px;
-    margin-bottom: 20px;
-
-    &[disabled=disabled] {
-      background: $grey;
-    }
+    margin: 0 0 20px 20px;
   }
   .synced_at {
       font-size: $font-size-small;

stylesheets/manifest.css

@@ -57,6 +57,23 @@ button {
   cursor: pointer;
   font-size: inherit; }
 
+button.grey {
+  border-radius: 5px;
+  border: solid 1px #ccc;
+  cursor: pointer;
+  margin: 1em auto;
+  padding: 1em;
+  font-family: inherit;
+  color: #616161;
+  background: #f3f3f3;
+  box-shadow: 0 0 10px -5px rgba(97, 97, 97, 0.5); }
+  button.grey:hover {
+    box-shadow: 0 0 10px -3px rgba(97, 97, 97, 0.7); }
+  button.grey[disabled=disabled], button.grey[disabled=disabled]:hover {
+    opacity: 0.5;
+    box-shadow: none;
+    cursor: default; }
+
 a {
   color: #2090ea; }
 
@@ -477,19 +494,6 @@ input[type=text]:active, input[type=text]:focus, input[type=search]:active, inpu
       width: 100%;
       resize: none;
       min-height: 100px; }
-.debug-log .submit {
-  border-radius: 5px;
-  border: solid 1px #ccc;
-  cursor: pointer;
-  margin: 1em auto;
-  padding: 1em;
-  font-family: inherit;
-  color: #616161;
-  background: #f3f3f3;
-  box-shadow: 0 0 10px -5px rgba(97, 97, 97, 0.5); }
-  .debug-log .submit:hover {
-    color: black;
-    box-shadow: 0 0 10px -3px rgba(97, 97, 97, 0.7); }
 .debug-log .result {
   text-align: center; }
   .debug-log .result .input-group {
@@ -891,17 +895,9 @@ input.search {
 
 .syncSettings button {
   float: right;
-  border: none;
-  border-radius: 5px;
-  color: white;
-  font-weight: bold;
   line-height: 36px;
   padding: 0 20px;
-  background: #2090ea;
-  margin-left: 20px;
-  margin-bottom: 20px; }
-  .syncSettings button[disabled=disabled] {
-    background: #616161; }
+  margin: 0 0 20px 20px; }
 .syncSettings .synced_at {
   font-size: 0.92857em;
   color: #616161; }