commit: 1e8af701923d7b7a088e30e32737827ddd597802
parent: ea138e08c9aca0265b06e81b469ecc435b5255dc
Author: asciimoo <asciimoo@gmail.com>
Date: Sun, 20 Oct 2013 12:19:34 +0200
[enh] checkbox redesign
Diffstat:
2 files changed, 45 insertions(+), 2 deletions(-)
diff --git 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
@@ -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>