[enh] search input "design"

This commit is contained in:
asciimoo 2013-11-01 15:33:53 +01:00
parent c838492d6d
commit fb6b918777
2 changed files with 34 additions and 2 deletions

View file

@ -97,3 +97,33 @@ a { text-decoration: none; }
.percentage div { background: #444444; } .percentage div { background: #444444; }
td { padding: 0 4px; } td { padding: 0 4px; }
tr:hover td { background: #DDDDDD; } tr:hover td { background: #DDDDDD; }
#search_wrapper { position: relative; max-width: 600px; margin: 10px; }
.center #search_wrapper { margin-left: auto; margin-right: auto; }
.q {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100%;
box-sizing: border-box;
border: 1px solid #c8c8c8;
border-bottom-color: #d2e2e7;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.4), 0 0 0 4px #dddddd;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.4), 0 0 0 4px #dddddd;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.4), 0 0 0 4px #dddddd;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.q:focus {
outline: none;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.6), 0 0 0 4px #dddddd;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.6), 0 0 0 4px #dddddd;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.6), 0 0 0 4px #dddddd;
}
#search_submit { position: absolute; top: 3px; right: 3px; border: 0; padding: 6px; border-left: 4px solid #dddddd; }
#results { margin-left: 10px; }

View file

@ -1,6 +1,8 @@
<form method="post" action="/"> <form method="post" action="/" id="search_form">
<div id="search_wrapper">
<input type="text" class="q" name="q" tabindex="1" autocomplete="off" {% if q %}value="{{ q }}"{% endif %}/> <input type="text" class="q" name="q" tabindex="1" autocomplete="off" {% if q %}value="{{ q }}"{% endif %}/>
<input type="submit" value="search" /> <input type="submit" value="search" id="search_submit" />
</div>
<p> <p>
{% for category in categories %} {% for category in categories %}
<div class="checkbox_container"> <div class="checkbox_container">