helpDialog.html

<!--
  This is shown when typing "?". This HTML is loaded by the background page and then populated with the
  latest keybindings information before displaying.
-->
<div id="vimiumHelpDialog">
  <style>
    #vimiumHelpDialog * { font-size:12px; line-height:130%; color:black; }
    #vimiumHelpDialog {
      text-align:left;
      border:3px solid red;
      opacity:0.92;
      background-color:#eee;
      position:fixed;
      width:600px;
      font-family:helvetica, arial, sans;
      border:2px solid #b3b3b3;
      border-radius:6px;
      padding:8px 12px;
      width:640px;
      left:50%;
      /* This needs to be 1/2 width to horizontally center the help dialog */
      margin-left:-320px;
      top:50px;
      -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 6px;
    }
    #vimiumHelpDialog a { color:blue; }
    #vimiumTitle, #vimiumTitle * { font-size:20px; }
    .vimiumColumn {
      width:50%;
      float:left;
    }
    .vimiumColumn table, .vimiumColumn td, .vimiumColumn tr { padding:0; margin:0; }
    .vimiumColumn table { width:100%; }
    .vimiumColumn td { vertical-align:top; padding:1px; }
    #vimiumHelpDialog .vimiumColumn tr > td:first-of-type {
      text-align:right;
      font-weight:bold;
      color:#2f508e;
      white-space:nowrap;
    }
    /* Make the description column as wide as it can be. */
    #vimiumHelpDialog .vimiumColumn tr > td:nth-of-type(3) { width:100%; }
    #vimiumHelpDialog .vimiumDivider {
      height:1px;
      width:92%;
      margin:10px auto;
      background-color:#9a9a9a;
    }
    #vimiumHelpDialog .vimiumHelpSectionTitle {
      font-weight:bold;
      padding-top:3px;
    }
    #vimiumHelpDialog .commandName {
      font-family:"courier new";
    }
    #vimiumHelpDialog .closeButton {
      position:absolute;
      right:10px;
      top:5px;
      font-family:"courier new";
      font-weight:bold;
      color:#555;
      text-decoration:none;
      padding-left:10px;
      font-size:16px;
    }
    #vimiumHelpDialog .closeButton:hover {
      color:black;
      cursor:default;
      -webkit-user-select:none;
    }
    #vimiumHelpDialogFooter * { font-size:10px; }
  </style>

  <!-- 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. -->
  <a class="closeButton" href="#">x</a>
  <div id="vimiumTitle"><span style="color:#2f508e">Vim</span>ium {{title}}</div>
  <div class="vimiumColumn">
    <table>
      <tr><td></td><td></td><td class="vimiumHelpSectionTitle">Navigating the page</td></tr>
      {{pageNavigation}}
    </table>
  </div>
  <div class="vimiumColumn">
    <table>
      <tr><td></td><td></td><td class="vimiumHelpSectionTitle">Navigating history</td></tr>
      {{historyNavigation}}
      <tr><td></td><td></td><td class="vimiumHelpSectionTitle">Manipulating tabs</td></tr>
      {{tabManipulation}}
    </table>
  </div>

  <br clear="both"/>
  <div class="vimiumDivider"></div>

  <div id="vimiumHelpDialogFooter">
    <div class="vimiumColumn">
      Enjoying Vimium?
        <a href="https://chrome.google.com/extensions/detail/dbepggeogbaibhgnhhndojpepiihcmeb">Leave us feedback</a>.<br/>
      Found a bug? <a href="http://github.com/philc/vimium/issues">Report it here</a>.
    </div>
    <div class="vimiumColumn" style="text-align:right">
      <span>Version {{version}}</span><br/>
      <!-- <a href="#">Homepage</a> -->
    </div>
  </div>
</div>