git.iko.soy/searx
on master help sign in
[enh] checkbox redesign
1e8af70asciimoo
searx/static/css/style.css+41
compare with master
unifiedsplit
@@ -10,6 +10,47 @@ h1 { font-size: 5em; }
10
10
11input { border: 2px solid #666666; color: #444444; padding: 8px; background-color: #FFFFFF; font-size: 1.1em; }
11input { border: 2px solid #666666; color: #444444; padding: 8px; background-color: #FFFFFF; font-size: 1.1em; }
12
12
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+
13a { text-decoration: none; }
54a { text-decoration: none; }
14
55
15.result_title { margin-bottom: 0; }
56.result_title { margin-bottom: 0; }
searx/templates/search.html+4−2
@@ -3,8 +3,10 @@
3 <input type="submit" value="search" />
3 <input type="submit" value="search" />
4 <p>
4 <p>
5 {% for category in categories %}
5 {% for category in categories %}
6+ <div class="checkbox_container">
6− <input type="checkbox" name="category_{{ category }}" {% if category in selected_categories %}checked="checked"{% endif %} />{{ category }}
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>
7 {% endfor %}
9 {% endfor %}
8 </p>
10 </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>
10</form>
12</form>