git.iko.soy/searx
on master help sign in
[enh] checkbox redesign
commit1e8af701923d7b7a088e30e32737827ddd597802 authorasciimoo <asciimoo@gmail.com> dateSun 20 Oct 2013, 12:19 (13 years ago) parentea138e0
2 files changed+45−2
compare with master
unifiedsplit
searx/static/css/style.css+41 searx/templates/search.html+4−2
searx/static/css/style.css+41
@@ -10,6 +10,47 @@ h1 { font-size: 5em; }
1010
1111input { border: 2px solid #666666; color: #444444; padding: 8px; background-color: #FFFFFF; font-size: 1.1em; }
1212
13+input[type="checkbox"] { visibility: hidden; }
14+
15+.checkbox_container { display: inline-block; position: relative; margin: 0; padding-left: 3px; margin: 0 10px; }
16+.checkbox_container label {
17+ cursor: pointer;
18+}
19+.checkbox_container label.cb {
20+ position: absolute;
21+ width: 16px;
22+ height: 16px;
23+ top: 2px;
24+ left: 2px;
25+ background: #eee;
26+ border:1px solid #ddd;
27+}
28+.checkbox_container label.cb:after {
29+ opacity: 0.2;
30+ content: '';
31+ position: absolute;
32+ width: 8px;
33+ height: 4px;
34+ background: transparent;
35+ top: 3px;
36+ left: 3px;
37+ border: 3px solid #333;
38+ border-top: none;
39+ border-right: none;
40+
41+ -webkit-transform: rotate(-45deg);
42+ -moz-transform: rotate(-45deg);
43+ -o-transform: rotate(-45deg);
44+ -ms-transform: rotate(-45deg);
45+ transform: rotate(-45deg);
46+}
47+.checkbox_container label.cb:hover:after {
48+ opacity: 0.5;
49+}
50+.checkbox_container input[type=checkbox]:checked + label.cb:after {
51+ opacity: 1;
52+}
53+
1354a { text-decoration: none; }
1455
1556.result_title { margin-bottom: 0; }
searx/templates/search.html+4−2
@@ -3,8 +3,10 @@
33 <input type="submit" value="search" />
44 <p>
55 {% for category in categories %}
6− <input type="checkbox" name="category_{{ category }}" {% if category in selected_categories %}checked="checked"{% endif %} />{{ category }}
6+ <div class="checkbox_container">
7+ <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>
8+ </div>
79 {% endfor %}
810 </p>
9− <p><input type="checkbox" name="save" checked="checked" />remember categories</p>
11+ <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>
1012</form>