diff options
| author | asciimoo <asciimoo@gmail.com> | 2013-10-20 12:19:34 +0200 |
|---|---|---|
| committer | asciimoo <asciimoo@gmail.com> | 2013-10-20 12:19:34 +0200 |
| commit | 1e8af701923d7b7a088e30e32737827ddd597802 (patch) | |
| tree | 0653a3c7c629ef3d18a7f21624fcd4ac14662283 | |
| parent | ea138e08c9aca0265b06e81b469ecc435b5255dc (diff) | |
[enh] checkbox redesign
| -rw-r--r-- | searx/static/css/style.css | 41 | ||||
| -rw-r--r-- | searx/templates/search.html | 6 |
2 files changed, 45 insertions, 2 deletions
diff --git a/searx/static/css/style.css b/searx/static/css/style.css index 99a2f488f..c98a049b3 100644 --- a/searx/static/css/style.css +++ b/searx/static/css/style.css @@ -10,6 +10,47 @@ h1 { font-size: 5em; } input { border: 2px solid #666666; color: #444444; padding: 8px; background-color: #FFFFFF; font-size: 1.1em; } +input[type="checkbox"] { visibility: hidden; } + +.checkbox_container { display: inline-block; position: relative; margin: 0; padding-left: 3px; margin: 0 10px; } +.checkbox_container label { + cursor: pointer; +} +.checkbox_container label.cb { + position: absolute; + width: 16px; + height: 16px; + top: 2px; + left: 2px; + background: #eee; + border:1px solid #ddd; +} +.checkbox_container label.cb:after { + opacity: 0.2; + content: ''; + position: absolute; + width: 8px; + height: 4px; + background: transparent; + top: 3px; + left: 3px; + border: 3px solid #333; + border-top: none; + border-right: none; + + -webkit-transform: rotate(-45deg); + -moz-transform: rotate(-45deg); + -o-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); +} +.checkbox_container label.cb:hover:after { + opacity: 0.5; +} +.checkbox_container input[type=checkbox]:checked + label.cb:after { + opacity: 1; +} + a { text-decoration: none; } .result_title { margin-bottom: 0; } diff --git a/searx/templates/search.html b/searx/templates/search.html index e9ec4bc3c..78925084f 100644 --- a/searx/templates/search.html +++ b/searx/templates/search.html @@ -3,8 +3,10 @@ <input type="submit" value="search" /> <p> {% for category in categories %} - <input type="checkbox" name="category_{{ category }}" {% if category in selected_categories %}checked="checked"{% endif %} />{{ category }} + <div class="checkbox_container"> + <input type="checkbox" id="checkbox_{{ category }}" name="category_{{ category }}" {% if category in selected_categories %}checked="checked"{% endif %} /><label for="checkbox_{{ category }}" class="cb"></label><label for="checkbox_{{ category }}">{{ category }}</label> + </div> {% endfor %} </p> - <p><input type="checkbox" name="save" checked="checked" />remember categories</p> + <p><div class="checkbox_container"><input type="checkbox" id="checkbox_save" name="save" checked="checked" /><label for="checkbox_save" class="cb"></label><label for="checkbox_save">remember categories</label></div></p> </form> |