diff options
| -rw-r--r-- | content_scripts/vimium.css | 27 | ||||
| -rw-r--r-- | pages/help_dialog.html | 104 |
2 files changed, 67 insertions, 64 deletions
diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css index f902363c..516859e2 100644 --- a/content_scripts/vimium.css +++ b/content_scripts/vimium.css @@ -137,18 +137,22 @@ div.vimiumHighlightedFrame { /* Help Dialog CSS */ +/* The help dialog iframe covers most of the height of the window, but is only + * as wide as it needs to be; so clicking to the left or right of it is + * clicking outside of the iframe. */ iframe.vimiumHelpDialogFrame { background-color: transparent; padding: 0px; - overflow: hidden; display: block; position: fixed; - width: 100%; - min-width: 400px; - height: 100%; - top: 0px; - left: 0px; + /* The width of div#vimiumHelpDialog, plus twice its padding and twice its border. */ + width: calc(640px + 24px + 4px); + height: calc(100% - 100px); /* 100% minus 2 * top. */ + top: 50px; + left: 50%; + /* This needs to be 1/2 the width to horizontally center the dialog */ + margin-left:-320px; border: none; /* One less than hint markers. */ @@ -163,15 +167,12 @@ div#vimiumHelpDialog { border:2px solid #b3b3b3; border-radius:6px; padding:8px 12px; - top:50px; - left:50%; + top:0px; + left:0px; width:640px; - max-height: calc(100% - 100px - 16px); /* 100% - 2*top - 2*padding for top/bottom */ - /* This needs to be 1/2 width to horizontally center the help dialog */ - margin-left:-320px; + max-height: calc(100% - 24px); /* 100% - twice the padding. */ -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 6px; - overflow-x: auto; - overflow-y: auto; + overflow: auto; } div#vimiumHelpDialog a { color:blue; } diff --git a/pages/help_dialog.html b/pages/help_dialog.html index b51aef9c..0696bc12 100644 --- a/pages/help_dialog.html +++ b/pages/help_dialog.html @@ -15,60 +15,62 @@ <!-- 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"> - <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="#">×</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 vimiumColumn"> - <table class="vimiumReset"> - <thead class="vimiumReset"> - <tr class="vimiumReset" ><td class="vimiumReset"></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Navigating the page</td></tr> - </thead> - <tbody id="help-dialog-pageNavigation" class="vimiumReset"> - </tbody> - </table> - </div> - <div class="vimiumReset vimiumColumn"> - <table class="vimiumReset" > - <thead class="vimiumReset"> - <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Using the vomnibar</td></tr> - </thead> - <tbody class="vimiumReset" id="help-dialog-vomnibarCommands"></tbody> - <thead class="vimiumReset"> - <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Using find</td></tr> - </thead> - <tbody class="vimiumReset" id="help-dialog-findCommands"></tbody> - <thead class="vimiumReset"> - <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Navigating history</td></tr> - </thead> - <tbody class="vimiumReset" id="help-dialog-historyNavigation"></tbody> - <thead class="vimiumReset"> - <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Manipulating tabs</td></tr> - </thead> - <tbody class="vimiumReset" id="help-dialog-tabManipulation"></tbody> - <thead class="vimiumReset"> - <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Miscellaneous</td></tr> - </thead> - <tbody class="vimiumReset" id="help-dialog-misc"></tbody> - </table> - </div> + <div id="vimiumHelpDialogContainer" 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="#">×</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 vimiumColumn"> + <table class="vimiumReset"> + <thead class="vimiumReset"> + <tr class="vimiumReset" ><td class="vimiumReset"></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Navigating the page</td></tr> + </thead> + <tbody id="help-dialog-pageNavigation" class="vimiumReset"> + </tbody> + </table> + </div> + <div class="vimiumReset vimiumColumn"> + <table class="vimiumReset" > + <thead class="vimiumReset"> + <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Using the vomnibar</td></tr> + </thead> + <tbody class="vimiumReset" id="help-dialog-vomnibarCommands"></tbody> + <thead class="vimiumReset"> + <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Using find</td></tr> + </thead> + <tbody class="vimiumReset" id="help-dialog-findCommands"></tbody> + <thead class="vimiumReset"> + <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Navigating history</td></tr> + </thead> + <tbody class="vimiumReset" id="help-dialog-historyNavigation"></tbody> + <thead class="vimiumReset"> + <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Manipulating tabs</td></tr> + </thead> + <tbody class="vimiumReset" id="help-dialog-tabManipulation"></tbody> + <thead class="vimiumReset"> + <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Miscellaneous</td></tr> + </thead> + <tbody class="vimiumReset" id="help-dialog-misc"></tbody> + </table> + </div> - <br clear="both"/> - <div class="vimiumReset vimiumDivider"></div> + <br clear="both"/> + <div class="vimiumReset vimiumDivider"></div> - <div id="vimiumHelpDialogFooter" class="vimiumReset"> - <a href="#" class="vimiumReset toggleAdvancedCommands">Show advanced commands</a> + <div id="vimiumHelpDialogFooter" class="vimiumReset"> + <a href="#" class="vimiumReset toggleAdvancedCommands">Show advanced commands</a> - <div class="vimiumReset vimiumColumn"> - Enjoying Vimium? - <a class="vimiumReset" href="https://chrome.google.com/extensions/detail/dbepggeogbaibhgnhhndojpepiihcmeb">Leave us - feedback</a>.<br/> - Found a bug? <a class="vimiumReset" href="http://github.com/philc/vimium/issues">Report it here</a>. - </div> - <div class="vimiumReset vimiumColumn" style="text-align:right"> - <span class="vimiumReset">Version <span id="help-dialog-version"></span></span><br/> - <a href="https://github.com/philc/vimium#release-notes" class="vimiumReset">What's new?</a> + <div class="vimiumReset vimiumColumn"> + Enjoying Vimium? + <a class="vimiumReset" href="https://chrome.google.com/extensions/detail/dbepggeogbaibhgnhhndojpepiihcmeb">Leave us + feedback</a>.<br/> + Found a bug? <a class="vimiumReset" href="http://github.com/philc/vimium/issues">Report it here</a>. + </div> + <div class="vimiumReset vimiumColumn" style="text-align:right"> + <span class="vimiumReset">Version <span id="help-dialog-version"></span></span><br/> + <a href="https://github.com/philc/vimium#release-notes" class="vimiumReset">What's new?</a> + </div> </div> </div> </div> |