Adjusted CSS for linkhints, help menu, text search, and bookmarks search UI elements. They should now be able to stand up to base element declarations created by a website.

Added comments to the linkhints css settings on the options page and set default properties that a user would change to make it clear where they should be modified.
Added a dropshadow to the linkhints to make them stand out better against similarly colored site backgrounds.

4 files changed, 93 insertions, 14 deletions

diff --git a/background_page.html b/background_page.html
index 73ffd77f..7ba2471d 100644
--- a/background_page.html
+++ b/background_page.html
@@ -30,7 +30,7 @@
     filterLinkHints: false,
     userDefinedLinkHintCss:
       ".vimiumHintMarker \n/* linkhint boxes */ {\nbackground-color:yellow;\nborder:1px solid #E3BE23;\n}\n\n" +
-      ".vimiumHintMarker span \n/* linkhints text */ {\ncolor: black;\nfont-weight: bold;\nfont-size: 12px;\n}\n\n" +
+      ".vimiumHintMarker span \n/* linkhint text */ {\ncolor: black;\nfont-weight: bold;\nfont-size: 12px;\n}\n\n" +
       ".vimiumHintMarker > .matchingCharacter {\n\n}",
     excludedUrls: "http*://mail.google.com/*\n" +
                   "http*://www.google.com/reader/*\n",
@@ -55,27 +55,51 @@
       'padding:0 1px;' +
       'margin: 0;' +
       'width:auto;' +
+      'height:auto;' +
       'display:block;' +
       'border:1px solid #E3BE23;' +
+      'opacity: 1;' +
       'z-index:99999999;' +
       'top:-1px;' +
       'left:-1px;' +
-      'white-space:nowrap;' +
+      'bottom: auto;' +
+      'right: auto;' +
+      'text-indent: 0;' +
+      // set font-size and line-height to ensure the box height adjust to the span height
+      'font-size: 0px;' +
+      'line-height: 100%;' +
+      // Add drop shadow in case the linkhint color is the same as the page color
+      'box-shadow: rgba(0, 0, 0, 0.3) 2px 2px;' +
+      'max-width: none;' +
+      'min-width: 0;' +
+      'max-height: none;' +
+      'min-height: 0;' +
     '}' +
     '.internalVimiumHintMarker span {' +
       'color: black;' +
+      'opacity: 1;' +
       'text-decoration: none;' +
       'font-weight: bold;' +
       'font-size: 12px;' +
+      'font-size-adjust: normal;' +
       'font-style: normal;' +
+      'font-width: normal;' +
       'letter-spacing: 0;' +
       'text-transform: none;' +
       'text-align: left;' +
       'text-indent: 0;' +
+      'text-shadow: none;' +
       'line-height: 100%;' +
       'font-family: "Helvetica Neue", "Helvetica", "Arial", "Sans";' +
       'padding: 0;' +
       'margin: 0;' +
+      'width: auto;' +
+      'height: auto;' +
+      'min-height: 0;' +
+      'max-height: none;' +
+      'min-width: 0;' +
+      'max-width: none;' +
+      'display: inline;' +
       'float: none;' +
       'border: none;' +
       'background: none;' +
diff --git a/completionDialog.js b/completionDialog.js
index f264eb2a..7a01a10d 100644
--- a/completionDialog.js
+++ b/completionDialog.js
@@ -149,30 +149,36 @@
     "color: black;" +
     "padding:10px;"+
     "border-radius: 4px;" +
-    "font-family: Lucida Grande, Arial, Sans;" +
     "}"+
+    
     ".vimium-completions {"+
-    "width:400px;"+
+      "width:400px;"+
     "}"+
+    
     ".vimium-completions .vimium-searchBar {"+
-    "height: 15px;"+
-    "border-bottom: 1px solid #b3b3b3;"+
+      "height: 15px;"+
+      "border-bottom: 1px solid #b3b3b3;"+
     "}"+
+    
     ".vimium-completions .vimium-searchResults {"+
     "}"+
+
     ".vimium-completions .vimium-searchResults .vimium-selected{"+
-    "background-color:#aaa;"+
-    "border-radius: 4px;" +
+      "background-color:#aaa;"+
+      "border-radius: 4px;" +
     "}"+
+    
     ".vimium-completions div{"+
-    "padding:4px;"+
+      "padding:4px;"+
     "}"+
+
     ".vimium-completions div strong{"+
-    "color: black;" +
-    "font-weight:bold;"+
+      "color: black;" +
+      "font-weight:bold;"+
     "}"+
+    
     ".vimium-completions .vimium-noResults{"+
-    "color:#555;"+
+      "color:#555;"+
     "}";
 
   window.CompletionDialog = CompletionDialog;
diff --git a/helpDialog.html b/helpDialog.html
index aa534640..aae8b619 100644
--- a/helpDialog.html
+++ b/helpDialog.html
@@ -4,11 +4,46 @@
 -->
 <div id="vimiumHelpDialog">
   <style>
+    /* Reset the elements on this page */
+    #vimiumHelpDialogContainer,
+    #vimiumHelpDialog,
+    #vimiumHelpDialog a,
+    #vimiumTitle,
+    #vimiumTitle span,
+    #vimiumHelpDialogFooter, 
+    .vimiumColumn,
+    .vimiumColumn span,
+    .vimiumDivider,
+    .optionsPage,
+    .closeButton {
+      opacity: 0.92;
+      letter-spacing: 0;
+      height: auto;
+      width: auto;
+      max-width: none;
+      max-height: none;
+      min-width: 0;
+      min-height: 0;
+      text-shadow: none;
+      padding: 0;
+      margin: 0;
+      position: static;
+      top: auto;
+      left: auto;
+      bottom: auto;
+      right: auto;
+      line-height: 100%;
+      font-size:11px;
+      font-weight: normal;
+      font-width: normal;
+      font-size-adjust: none;
+    }
     #vimiumHelpDialog * {
       font-size:11px;
       line-height:130%;
       color:black;
       background-color:transparent;
+      opacity: 1;
     }
     #vimiumHelpDialog {
       text-align:left;
@@ -16,12 +51,14 @@
       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;
+      max-width:none;
+      height: auto;
+      max-height:none;
       left:50%;
       /* This needs to be 1/2 width to horizontally center the help dialog */
       margin-left:-320px;
@@ -31,7 +68,7 @@
       overflow-y: scroll;
     }
     #vimiumHelpDialog a { color:blue; }
-    #vimiumTitle, #vimiumTitle * { font-size:20px; }
+    #vimiumTitle, #vimiumTitle span,  #vimiumTitle * { font-size:20px; }
     .vimiumColumn {
       width:50%;
       float:left;
@@ -72,6 +109,9 @@
       padding-left:10px;
       font-size:16px;
     }
+    #vimiumHelpDialog a {
+      text-decoration: underline;
+    }
     #vimiumHelpDialog a.optionsPage {
       position: absolute;
       right: 60px;
diff --git a/vimiumFrontend.js b/vimiumFrontend.js
index edc67709..9b93b4dd 100644
--- a/vimiumFrontend.js
+++ b/vimiumFrontend.js
@@ -784,12 +784,17 @@ HUD = {
       "line-height: 100%;" +
       "font-size: 11px;" +
       "font-weight: normal;" +
+      "letter-spacing: 0;" +
+      "text-decoration: none;" +
     "}" +
     ".vimiumHUD {" +
       "position: fixed;" +
+      "top: auto;" +
+      "left: auto;" +
       "bottom: 0px;" +
       "color: black;" +
       "height: 13px;" +
+      "min-height: 13px;" +
       "width: auto;" +
       "max-width: 400px;" +
       "min-width: 150px;" +
@@ -806,6 +811,10 @@ HUD = {
       "line-height: 1.0;" +
       "opacity: 0;" +
     "}" +
+    // Hide the span between search box letters
+    ".vimiumHUD span {" +
+      "display: none;" +
+    "}" +
     ".vimiumHUD a, .vimiumHUD a:hover {" +
       "background: transparent;" +
       "color: blue;" +