Help dialog: increase size and make white background.

3 files changed, 16 insertions, 6 deletions

diff --git a/background_scripts/main.coffee b/background_scripts/main.coffee
index 3e1cc0a3..272146cb 100644
--- a/background_scripts/main.coffee
+++ b/background_scripts/main.coffee
@@ -123,7 +123,7 @@ helpDialogHtmlForCommand = (html, isAdvanced, bindings, description, showCommand
   html.push "<tr class='vimiumReset #{"advanced" if isAdvanced}'>"
   if description
     html.push "<td class='vimiumReset'>", Utils.escapeHtml(bindings), "</td>"
-    html.push "<td class='vimiumReset'>#{if description and bindings then ':' else ''}</td><td class='vimiumReset'>", description
+    html.push "<td class='vimiumReset'>#{if description and bindings then ':' else ''}</td><td class='vimiumReset vimiumHelpDescription'>", description
     html.push("<span class='vimiumReset commandName'>(#{command})</span>") if showCommandNames
   else
     html.push "<td class='vimiumReset' colspan='3' style='text-align: left;'>", Utils.escapeHtml(bindings)
diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css
index 522b9b1c..ac683798 100644
--- a/content_scripts/vimium.css
+++ b/content_scripts/vimium.css
@@ -154,8 +154,8 @@ iframe.vimiumHelpDialogFrame {
 div#vimiumHelpDialog {
   border:3px solid;
   -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 6px;
-  opacity:0.92;
-  background-color:#eee;
+  opacity:1.0;
+  background-color:white;
   position:fixed;
   border:2px solid #b3b3b3;
   border-radius:6px;
@@ -194,6 +194,9 @@ div.vimiumColumn table, div.vimiumColumn td, div.vimiumColumn tr { padding:0; ma
 div.vimiumColumn table { width:100%; table-layout:auto; }
 div.vimiumColumn td { vertical-align:top; padding:1px; }
 div#vimiumHelpDialog div.vimiumColumn tr > td:first-of-type {
+  /* This is the "key" column, e.g. "j", "gg". */
+  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
+  font-size:14px;
   text-align:right;
   font-weight:bold;
   color:#2f508e;
@@ -204,13 +207,19 @@ div#vimiumHelpDialog div.vimiumColumn tr > td:nth-of-type(3) { width:100%; }
 div#vimiumHelpDialog div.vimiumDivider {
   display: block;
   height:1px;
-  width:92%;
+  width:100%;
   margin:10px auto;
   background-color:#9a9a9a;
 }
 div#vimiumHelpDialog td.vimiumHelpSectionTitle {
-  font-weight:bold;
   padding-top:3px;
+  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
+  font-size:16px;
+  font-weight:bold;
+}
+div#vimiumHelpDialog td.vimiumHelpDescription {
+  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
+  font-size:14px;
 }
 div#vimiumHelpDialog div.commandName { font-family:"courier new"; }
 /* Advanced commands are hidden by default until you show them. */
diff --git a/pages/help_dialog.html b/pages/help_dialog.html
index 3bfa3e5a..3141b1ee 100644
--- a/pages/help_dialog.html
+++ b/pages/help_dialog.html
@@ -15,11 +15,12 @@
 
   <!-- Note that the template placeholders (e.g. "pageNavigation") will be filled in by the background
        page with the up-to-date key bindings when the dialog is shown. -->
-    <div id="vimiumHelpDialog" class="vimiumReset">
+    <div id="vimiumHelpDialog">
       <a class="vimiumReset optionsPage" href="#">Options</a>
       <a class="vimiumReset wikiPage" href="https://github.com/philc/vimium/wiki" target="_blank">Wiki</a>
       <a class="vimiumReset closeButton" href="#">&times;</a>
       <div id="vimiumTitle" class="vimiumReset"><span class="vimiumReset" style="color:#2f508e">Vim</span>ium <span id="help-dialog-title"></span></div>
+      <div class="vimiumReset vimiumDivider"></div>
       <div class="vimiumReset vimiumColumn">
         <table class="vimiumReset">
           <thead class="vimiumReset">