Clean up options page

Author: muan

chrome/src/options/options.css

@@ -1,7 +1,8 @@
 body, button {
   background-color: #fff;
-  font-family: 'Helvetica Neue', Helvetica, sans-serif;
+  font-family: Geneva, Tahoma, Verdana, sans-serif;
   font-size: 13px;
+  color: #121210;
   line-height: 1.6;
 }
 
@@ -11,57 +12,48 @@ body, * {
 
 .wrapper {
   width: 500px;
-  margin: 30px auto;
-  border-radius: 3px;
+  margin: auto;
   padding: 0 20px;
-  overflow: hidden;
-  border: 1px solid #e0e0e0;
 }
 
 .notice {
   display: none;
-  background: #ffeeee;
-  border-top: 1px solid #fcc;
-  border-bottom: 1px solid #fcc;
-  color: #a00;
-  padding: 20px;
-  margin: -1px -20px 0;
+  background: #f1f5f9;
+  border-left: 2px solid #c1c5cd;
+  border-radius: 0 5px 5px 0;
+  padding: 12px;
+  margin: 30px 0;
   font-weight: bold;
 }
 
 .option {
-  margin: 0 -20px 0;
-  padding: 20px;
-  background-color: #f9f9f9;
+  margin: 30px 0 0;
   transition: all 0.6s;
 }
 
-.option:last-child {
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.option:nth-child(even) {
-  border-top: 1px solid #e0e0e0;
-  border-bottom: 1px solid #e0e0e0;
-  background-color: #fff;
-}
-
 .saved.option {
   background: #ffe;
   color: #333;
 }
 
+.description {
+  margin-top: 5px;
+  color: #666;
+}
+
 input[type]:focus {
   background-color: #fff;
+  border: 1px solid #49d;
+  outline: none;
 }
 
 input[type] {
-  background: none;
-  border: 1px solid #e0e0e0;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
-  padding: 9px;
+  background: #f5f5f5;
+  border: 1px solid transparent;
+  border-radius: 5px;
+  padding: 12px;
   margin-top: 5px;
-  font-family: monospace;
+  font-family: menlo, monospace;
 }
 
 input[type], button {
@@ -71,7 +63,7 @@ input[type], button {
 }
 
 label {
-  font-weight: bold;
+  font-size: 14px;
 }
 
 button {
@@ -81,14 +73,17 @@ button {
   color: #fff;
   font-weight: bold;
   cursor: pointer;
+  letter-spacing: 2px;
+  border-radius: 5px;
   text-transform: uppercase;
-  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .1);
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .1);
   transition: all .6s;
   margin: 20px 0;
+  font-size: 12px;
 }
 
 button:active {
-  box-shadow: inset 0 4px 0 rgba(0, 0, 0, .1);
+  box-shadow: inset 0 1px 0 rgba(0, 0, 0, .1);
 }
 
 code {

chrome/src/options/options.json

@@ -2,16 +2,16 @@
   "Domains" : {
     "description": "Specify GitHub enterprise domain, or other domains you'd like to grab links for. There's no need to add github.com, protocol is also not required unless you'd like to be explicit.",
     "val": "",
-    "hint": "( comma separated if multiple )"
+    "hint": "(comma separated if multiple)"
   },
   "Shortcut" : {
     "description": "The shortcut that triggers button clicking on the mail view.",
     "val": "shift + 71",
-    "hint": " ( press shortcut in the input field )"
+    "hint": " (press shortcut in the input field)"
   },
   "BackgroundShortcut" : {
     "description": "The shortcut that triggers button clicking on the mail view, opens the link in the background.",
     "val": "shift + 66",
-    "hint": " ( press shortcut in the input field )"
+    "hint": " (press shortcut in the input field)"
   }
 }