Restyle Search Field

css/style.css

@@ -97,3 +97,38 @@ body {
   font-weight: bold;
   color: #ffffff;
 }
+
+
+/* Style the search field */
+form.f-search input[type=text] {
+  padding: 10px;
+  font-size: 17px;
+  border: 1px solid grey;
+  float: left;
+  width: 80%;
+  background: #f1f1f1;
+}
+
+/* Style the submit button */
+form.f-search button {
+  float: left;
+  width: 20%;
+  padding: 10px;
+  background: #2196F3;
+  color: white;
+  font-size: 17px;
+  border: 1px solid grey;
+  border-left: none; /* Prevent double borders */
+  cursor: pointer;
+}
+
+form.f-search button:hover {
+  background: #0b7dda;
+}
+
+/* Clear floats */
+form.f-search::after {
+  content: "";
+  clear: both;
+  display: table;
+}

tpl/gallery.html

@@ -6,9 +6,9 @@
 <div class="content">
 <div class="page-header">
   <div class="search">
-    <form action="index.php" method="get">
-      Suchen: <input type="text" name="f" />
-      <input type="submit" />
+    <form class="f-search" action="index.php" method="get">
+      <input type=" text"placeholder="Suche.." name="f" />
+      <button type="submit"><i class="fa fa-search"></i></button>
       <input type="hidden" name="d" value="{{ $dir }}">
       <input type="hidden" name="s" value="{{ $slice }}">
     </form>

tpl/layout.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
 
     <link rel="stylesheet" type="text/css" href="css/style.css">
+    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
     <script src="js/shortcut.js"></script>
 
     <title>{% yield title %}</title>