Updated frontend code to prepare for additional selectors

res/search.css

@@ -113,28 +113,28 @@ nav.search .wrapper {
     background: #fff;
 }
 
-nav input[type=text]::-moz-placeholder {
+nav.search input[type=text]::-moz-placeholder {
     color: #ffffff;
     opacity: 1;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
 
-nav input[type=text]::-webkit-input-placeholder {
+nav.search input[type=text]::-webkit-input-placeholder {
     color: #ffffff;
     opacity: 1;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
 
-nav input[type=text]:focus::-moz-placeholder {
+nav.search input[type=text]::-moz-placeholder {
     color: #757575;
     opacity: 1;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
 
-nav input[type=text]:focus::-webkit-input-placeholder {
+nav.search input[type=text]::-webkit-input-placeholder {
     color: #757575;
     opacity: 1;
     -webkit-font-smoothing: antialiased;
@@ -145,22 +145,46 @@ nav input[type=text]:focus::-webkit-input-placeholder {
     max-width: 1136px;
     margin: 10px auto;
     height: 36px;
-    display: block;
+    display: flex;
     position: relative;
-}
-
-nav input[type=text] {
-    width: 100%;
-    height: 100%;
-    display: inline-block;
     border: none;
     -webkit-transition: background .15s;
     transition: background .15s;
     background: rgba(255, 255, 255, .15);
     border-radius: 2px;
-    padding: 0 72px;
+    padding: 0 0 0 72px;
     color: #ffffff;
-    box-sizing: border-box;
+    flex-direction: row;
+}
+
+#searchbar label.clip {
+    display: inline-block;
+    height: 20px;
+    line-height: 20px;
+    margin: 8px 0;
+    background: #afb42b;
+    padding: 0 8px;
+    border-radius: 10px;
+    color: #ffffff;
+}
+
+#searchbar label.clip:not(:first-of-type) {
+    margin-left: 8px;
+}
+
+#searchbar label {
+    display: inline-block;
+    line-height: 36px;
+}
+
+#searchbar input[type=text] {
+    display: inline-block;
+    flex-grow: 1;
+    flex-shrink: 1;
+    background: none;
+    border: none;
+    line-height: 100%;
+    color: inherit !important;
 }
 
 #searchicon {
@@ -170,7 +194,7 @@ nav input[type=text] {
     position: absolute;
     text-align: center;
     line-height: 36px;
-    color: #ffffff;
+    color: inherit !important;
     left: 0;
     top: 0;
 }
@@ -238,17 +262,13 @@ article > inline-button {
     background: #f5f5f5;
 }
 
-nav input[type=text]:hover {
+#searchbar:hover {
     background: rgba(255, 255, 255, .25);
 }
 
-nav input[type=text]:focus {
+nav.search #searchbar {
     background: #f6f6f6;
-    color: #212121;
-}
-
-nav input[type=text]:focus + #searchicon {
-    color: #212121;
+    color: #212121 !important;
 }
 
 .icon {

templates/search.phtml

@@ -19,8 +19,8 @@
 <nav>
     <div class="wrapper">
         <div id="searchbar">
-            <input name="q" id="q" placeholder="<?php $t('search'); ?>" type="text" autocomplete="off">
             <div id="searchicon" class="icon">search</div>
+            <input name="q" id="q" placeholder="<?php $t('search'); ?>" type="text" autocomplete="off">
         </div>
     </div>
     <div id="actions">