diff options
| -rw-r--r-- | background_scripts/completion.coffee | 13 | ||||
| -rw-r--r-- | content_scripts/vomnibar.coffee | 6 | ||||
| -rw-r--r-- | vimium.css | 37 |
3 files changed, 34 insertions, 22 deletions
diff --git a/background_scripts/completion.coffee b/background_scripts/completion.coffee index b9069dce..5920db0b 100644 --- a/background_scripts/completion.coffee +++ b/background_scripts/completion.coffee @@ -27,13 +27,14 @@ class Suggestion generateHtml: -> return @html if @html relevancyHtml = if @showRelevancy then "<span class='relevancy'>#{@computeRelevancy() + ''}</span>" else "" + # NOTE(philc): We're using these vimium-specific class names so we don't collide with the page's CSS. @html = - "<div class='topHalf'> - <span class='source'>#{@type}</span> - <span class='title'>#{@highlightTerms(Utils.escapeHtml(@title))}</span> + "<div class='vimiumReset vomnibarTopHalf'> + <span class='vimiumReset vomnibarSource'>#{@type}</span> + <span class='vimiumReset vomnibarTitle'>#{@highlightTerms(Utils.escapeHtml(@title))}</span> </div> - <div class='bottomHalf'> - <span class='url'>#{@shortenUrl(@highlightTerms(@url))}</span> + <div class='vimiumReset vomnibarBottomHalf'> + <span class='vimiumReset vomnibarUrl'>#{@shortenUrl(@highlightTerms(@url))}</span> #{relevancyHtml} </div>" @@ -58,7 +59,7 @@ class Suggestion for [start, end] in ranges string = string.substring(0, start) + - "<span class='match'>" + string.substring(start, end) + "</span>" + + "<span class='vomnibarMatch'>" + string.substring(start, end) + "</span>" + string.substring(end) string diff --git a/content_scripts/vomnibar.coffee b/content_scripts/vomnibar.coffee index ac02dfca..0b96d2bb 100644 --- a/content_scripts/vomnibar.coffee +++ b/content_scripts/vomnibar.coffee @@ -67,7 +67,7 @@ class VomnibarUI if (@completions.length > 0) @selection = Math.min(@selection, @completions.length - 1) for i in [0...@completionList.children.length] - @completionList.children[i].className = (if i == @selection then "selected" else "") + @completionList.children[i].className = (if i == @selection then "vomnibarSelected" else "") # # Returns the user's action ("up", "down", "enter", "dismiss" or null) based on their keypress. @@ -158,8 +158,8 @@ class VomnibarUI initDom: -> @box = Utils.createElementFromHtml( '<div id="vomnibar" class="vimiumReset">' + - '<div class="searchArea">' + - '<input type="text" />' + + '<div class="vimiumReset vomnibarSearchArea">' + + '<input type="text" class="vimiumReset" />' + '</div>' + '<ul></ul>' + '</div>') @@ -253,9 +253,11 @@ body.vimiumFindMode ::selection { #vomnibar ol, #vomnibar ul { list-style: none !important; + display: block; } #vomnibar { + display: block; position: fixed !important; width: 80% !important; min-width: 400px !important; @@ -277,6 +279,7 @@ body.vimiumFindMode ::selection { font-size: 20px !important; padding: 4px !important; font-family: inherit !important; + background-color: white; border-radius: 3px; border: 1px solid #E8E8E8 !important; box-shadow: #444 0px 0px 1px !important; @@ -285,7 +288,8 @@ body.vimiumFindMode ::selection { box-sizing: border-box !important; } -#vomnibar .searchArea { +#vomnibar .vomnibarSearchArea { + display: block; padding: 10px !important; background-color: #F1F1F1 !important; border-radius: 4px 4px 0 0 !important; @@ -305,7 +309,7 @@ body.vimiumFindMode ::selection { border-bottom: 1px solid #ddd !important; line-height: 1.1em !important; padding: 7px 10px !important; - font-size: 16px !important; + font-size: 16px; color: black !important; position: relative !important; } @@ -314,17 +318,22 @@ body.vimiumFindMode ::selection { border-bottom: none !important; } -#vomnibar li .topHalf, #vomnibar li .bottomHalf { overflow: hidden !important; } -#vomnibar li .bottomHalf { - margin-top: 2px; - font-size: 15px !important; +#vomnibar li .vomnibarTopHalf, #vomnibar li .vomnibarBottomHalf { + display: block; + overflow: hidden !important; } -#vomnibar li .source { +#vomnibar li .vomnibarBottomHalf { + font-size: 15px; + margin-top: 3px; + padding: 2px 0; +} + +#vomnibar li .vomnibarSource { color: #777 !important; margin-right: 4px !important; } -#vomnibar li .relevancy { +#vomnibar li .vomnibarRelevancy { position: absolute; right: 0; top: 0; @@ -336,19 +345,19 @@ body.vimiumFindMode ::selection { overflow: hidden; } -#vomnibar li .url { +#vomnibar li .vomnibarUrl { white-space: nowrap; color: #224684 !important; } -#vomnibar li .match { +#vomnibar li .vomnibarMatch { font-size: inherit !important; font-family: inherit !important; font-weight: bold !important; color: black !important; } -#vomnibar li em, #vomnibar li .title { +#vomnibar li em, #vomnibar li .vomnibarTitle { color: black !important; margin-left: 4px !important; font-weight: normal !important; @@ -356,17 +365,19 @@ body.vimiumFindMode ::selection { font-family: inherit !important; } #vomnibar li em { font-style: italic !important; } -#vomnibar li em .match, #vomnibar li .title .match { +#vomnibar li em .vomnibarMatch, #vomnibar li .vomnibarTitle .vomnibarMatch { color: #333 !important; text-decoration: underline !important; } -#vomnibar li.selected { +#vomnibar li.vomnibarSelected { background: #BBCEE9 !important; font-weight: normal !important; font-family: inherit !important; } + + div#vimiumFlash { box-shadow: 0px 0px 4px 2px #4183C4; padding: 1px; |