diff --git a/background.html b/background.html
index 4fde50b8..0a4b3562 100644
--- a/background.html
+++ b/background.html
@@ -21,6 +21,7 @@
Signal
+
diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss
index 3f7a5a2f..ca02380f 100644
--- a/stylesheets/_index.scss
+++ b/stylesheets/_index.scss
@@ -85,17 +85,35 @@
border-color: rgba(0,0,0,0.05);
}
+.tool-bar {
+ position: relative;
+ .search-icon {
+ content: '';
+ display: inline-block;
+ float: left;
+ width: 24px;
+ height: 100%;
+ -webkit-mask: url('/images/search.svg') no-repeat left center;
+ -webkit-mask-size: 100%;
+ background-color: #ccc;
+ position: absolute;
+ left: 20px;
+ top: 0;
+ }
+}
+
input.search {
border: none;
- padding: 0;
+ padding: 0 10px 0 65px;
margin: 0;
outline: 0;
height: $search-height;
+ line-height: $search-height;
width: 100%;
- padding: 10px;
border: solid 1px $grey_l;
outline-offset: -2px;
font-size: inherit;
+ position: relative;
&.active {
outline: solid 1px $blue;
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index bd641313..e4565351 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -561,17 +561,33 @@ input[type=text]:active, input[type=text]:focus, input[type=search]:active, inpu
color: #454545;
border-color: rgba(0, 0, 0, 0.05); }
+.tool-bar {
+ position: relative; }
+ .tool-bar .search-icon {
+ content: '';
+ display: inline-block;
+ float: left;
+ width: 24px;
+ height: 100%;
+ -webkit-mask: url("/images/search.svg") no-repeat left center;
+ -webkit-mask-size: 100%;
+ background-color: #ccc;
+ position: absolute;
+ left: 20px;
+ top: 0; }
+
input.search {
border: none;
- padding: 0;
+ padding: 0 10px 0 65px;
margin: 0;
outline: 0;
height: 36px;
+ line-height: 36px;
width: 100%;
- padding: 10px;
border: solid 1px #f3f3f3;
outline-offset: -2px;
- font-size: inherit; }
+ font-size: inherit;
+ position: relative; }
input.search.active {
outline: solid 1px #2090ea; }
input.search::-webkit-search-cancel-button {