picky-generators 4.2.4 → 4.3.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,22 +1,86 @@
1
- body {
2
- text-align: center;
3
- font-family: Lucida Grande; }
4
- body .content {
5
- width: 560px;
6
- margin: 0 auto;
7
- text-align: left; }
8
-
9
- img {
10
- margin: 0px 0px -210px; }
1
+ * {
2
+ -moz-box-sizing: border-box;
3
+ -webkit-box-sizing: border-box;
4
+ box-sizing: border-box;
5
+ }
6
+ @font-face /* TODO: Replace with images */
7
+ {
8
+ font-family: 'myriad';
9
+ src: url('MyriadPro-Semibold.otf') format('opentype');
10
+ }
11
+ body,
12
+ html
13
+ {
14
+ margin: 0;
15
+ padding: 0;
16
+ }
17
+ body
18
+ {
19
+ font: 15px/20px "HelveticaNeue", arial, sans-serif;
20
+ text-rendering: optimizeLegibility;
21
+ background: url(images/background.png), #f8f8fc;
22
+ background-size: 64px;
23
+ }
24
+ body > div
25
+ {
26
+ width: 728px;
27
+ padding: 20px;
28
+ margin: 0 auto;
29
+ }
30
+ pre {
31
+ padding: 10px;
32
+ background-color: #efede5;
33
+ }
11
34
 
12
- p span.explanation {
13
- color: #999999; }
35
+ /* Headers */
36
+ hgroup {
37
+ width: 728px;
38
+ height: 61px;
39
+ margin: 0 auto;
40
+ }
41
+ hgroup img.picky {
42
+ float: left;
43
+ margin-left: 30px;
44
+ }
45
+ hgroup h1 {
46
+ font-size: 1.5em;
47
+ }
48
+ hgroup h2 {
49
+ font-size: 1.0em;
50
+ }
51
+ hgroup h1, hgroup h2 {
52
+ margin: 10px 0px 0px 150px;
53
+ }
54
+ hgroup a {
55
+ color: #999;
56
+ }
14
57
 
15
- pre {
58
+ /* Content */
59
+ .content
60
+ {
61
+ padding: 20px;
62
+ background: rgba(0,0,0,0.08);
63
+ border: 1px solid #cacacb;
64
+ border-top-color: #d1d1d2;
65
+ border-bottom-color: #b8b8ba;
66
+ border-radius: 6px;
67
+ box-shadow: inset 0 1px 3px rgba(255,255,255,0.4), 0 1px 3px rgba(0,0,0,0.16);
68
+ }
69
+ section {
16
70
  padding: 10px;
17
- background-color: #efede5; }
71
+ }
18
72
 
19
- #picky ol.results li.book {
20
- background-color: #ffeeee;
21
- padding: 5px 25px;
22
- margin: 3px 0px; }
73
+ /* Footer */
74
+ footer
75
+ {
76
+ text-align: center;
77
+ }
78
+ footer,
79
+ footer a
80
+ {
81
+ color: #a0a0a8;
82
+ }
83
+ footer a:hover
84
+ {
85
+ color: #808088;
86
+ }
@@ -0,0 +1,10 @@
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
+ <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4
+ <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
5
+ width="32px" height="64px" viewBox="0 0 32 64" enable-background="new 0 0 32 64" xml:space="preserve">
6
+ <path fill="#C0C0C8" d="M16,2C8.268,2,2,8.268,2,16s6.268,14,14,14s14-6.268,14-14S23.732,2,16,2z M24.5,21.5l-3,3L16,19l-5.5,5.5
7
+ l-3-3L13,16l-5.5-5.5l3-3L16,13l5.5-5.5l3,3L19,16L24.5,21.5z"/>
8
+ <path fill="#A0A0A8" d="M16,34C8.268,34,2,40.268,2,48s6.268,14,14,14s14-6.268,14-14S23.732,34,16,34z M24.5,53.5l-3,3L16,51
9
+ l-5.5,5.5l-3-3L13,48l-5.5-5.5l3-3L16,45l5.5-5.5l3,3L19,48L24.5,53.5z"/>
10
+ </svg>
@@ -1,135 +1,277 @@
1
- #picky {
2
- overflow: hidden; }
3
- #picky > div.header {
4
- display: none; }
5
- #picky div.dashboard {
6
- position: relative;
7
- overflow: hidden;
8
- background-color: lightGrey;
9
- padding: 5px 5px 7px 5px;
10
- height: 26px;
11
- margin-bottom: 3px; }
12
- #picky div.dashboard.empty .status {
13
- background-color: #8cacda; }
14
- #picky div.dashboard.empty .feedback {
15
- background-color: #d0e2ff; }
16
- #picky div.dashboard.none .status {
17
- background-color: red; }
18
- #picky div.dashboard.none .feedback {
19
- background-color: #ffdddd; }
20
- #picky div.dashboard.support .status {
21
- background-color: #ff6600; }
22
- #picky div.dashboard.support .feedback {
23
- background-color: #faf3d0; }
24
- #picky div.dashboard.ok .status {
25
- background-color: #09be01; }
26
- #picky div.dashboard.ok .feedback {
27
- background-color: #bcf0b3; }
28
- #picky div.dashboard .feedback {
29
- width: 85%;
30
- float: left;
31
- border: 1px solid #cccccc;
32
- padding: 0;
33
- margin: 0; }
34
- #picky div.dashboard .feedback .status {
35
- float: left;
36
- width: 45px;
37
- height: 26px;
38
- line-height: 26px;
39
- text-align: center;
40
- padding: 0 0 0 2px;
41
- font-weight: bold;
42
- color: white;
43
- margin-right: 5px; }
44
- #picky div.dashboard .feedback .status.alert {
45
- background-color: lightgreen; }
46
- #picky div.dashboard .feedback input.query {
47
- float: left;
48
- width: 80%;
49
- height: 100%;
50
- font-size: 1em;
51
- font-weight: bold;
52
- border-style: solid;
53
- border-width: 0px 0px 3px 0px;
54
- border-color: transparent;
55
- margin: 0;
56
- padding: 4px 0 0 0;
57
- outline: none;
58
- background: none; }
59
- #picky div.dashboard .feedback .reset {
60
- float: right;
61
- width: 18px;
62
- height: 18px;
63
- margin: 3px 3px 0px 0px;
64
- cursor: pointer;
65
- opacity: 0; }
66
- #picky div.dashboard input.search_button {
67
- margin: 5px 0px 5px 2%; }
68
- #picky div.results {
69
- margin-top: 0px;
70
- padding: 0px; }
71
- #picky div.results div.header, #picky div.results div.addination {
72
- color: #555555;
73
- background-color: #eeeeee;
74
- padding: 6px 5px 5px 8px; }
75
- #picky div.results div.header .tothetop, #picky div.results div.addination .tothetop {
76
- float: right; }
77
- #picky div.results div.header .tothetop a, #picky div.results div.addination .tothetop a {
78
- display: block;
79
- width: 20px;
80
- height: 20px; }
81
- #picky div.results ol.results {
82
- list-style-type: none;
83
- padding: 0px;
84
- margin: 0px; }
85
- #picky div.results div.addination {
86
- position: relative;
87
- text-align: center;
88
- color: #276abb;
89
- cursor: pointer; }
90
- #picky .no_results {
91
- display: none; }
92
- #picky .allocations {
93
- clear: both;
94
- overflow: hidden;
95
- background-color: white;
96
- padding-bottom: 2px; }
97
- #picky .allocations ol.hidden {
98
- display: none; }
99
- #picky .allocations ol.more:hover {
100
- background-color: #cccccc;
101
- cursor: pointer; }
102
- #picky .allocations ol.more {
103
- background-color: #eeeeee;
104
- display: none;
105
- text-align: center;
106
- height: 32px;
107
- line-height: 32px; }
108
- #picky .allocations ol.more li {
109
- text-align: center; }
110
- #picky .allocations ol {
111
- list-style-position: outside;
112
- list-style: none;
113
- padding: 0;
114
- margin: 0px;
115
- overflow: hidden; }
116
- #picky .allocations ol li {
117
- margin: 0px;
118
- margin-bottom: 3px;
119
- padding: 10px 13px;
120
- cursor: pointer;
121
- display: block;
122
- font: menu;
123
- font-size: 1em;
124
- line-height: 16px;
125
- background-color: #f3f3f3;
126
- overflow: hidden;
127
- color: #276abb; }
128
- #picky .allocations ol li .text {
129
- max-width: 90%;
130
- float: left; }
131
- #picky .allocations ol li .count {
132
- float: right;
133
- color: #cccccc; }
134
- #picky .allocations ol li:hover {
135
- background-color: #d0e2ff; }
1
+ /* Form */
2
+ form
3
+ {
4
+ display: block;
5
+ position: relative;
6
+ height: 46px;
7
+ background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.08))), rgba(255,255,255,0.4);
8
+ background: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.08)), rgba(255,255,255,0.4);
9
+ border-radius: 99px;
10
+ box-shadow: inset 0 1px 0 rgba(0,0,0,0.08), inset 0 0 4px rgba(0,0,0,0.6), 0 0px 0 rgba(255,255,255,0.6);
11
+ -webkit-user-select: none;
12
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
13
+ }
14
+ form input[type=search],
15
+ form input[type=button],
16
+ form .status
17
+ {
18
+ height: 46px;
19
+ border: 1px solid #98989f;
20
+ -webkit-appearance: none;
21
+ border-radius: 99px;
22
+ box-shadow: inset 0 2px 4px rgba(0,0,0,0.12);
23
+ background: #fff;
24
+ line-height: 1;
25
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
26
+ -webkit-box-sizing: border-box;
27
+ -moz-box-sizing: border-box;
28
+ box-sizing: border-box;
29
+ }
30
+ form input[type=search] {
31
+ font-size: 30px;
32
+ z-index: 3;
33
+ display: block;
34
+ position: absolute;
35
+ margin: 0 0 0 2em;
36
+ padding: 0 8px 0 13px;
37
+ width: 526px;
38
+ }
39
+ form input[type=search]::-webkit-input-placeholder
40
+ {
41
+ color: #c0c0c8;
42
+ font-size: 30px;
43
+ line-height: 36px; /* Fixes placeholder vertical alignment in Chrome and Webkit Nightly (535.*) */
44
+ }
45
+ form input[type=search]:-moz-placeholder
46
+ {
47
+ color: #c0c0c8;
48
+ }
49
+ form input[type=search]:focus
50
+ {
51
+ outline: none;
52
+ border-color: #6e96c7;
53
+ box-shadow: inset 0 0 4px #6e96c7, inset 0 0 4px #6e96c7, 0 0 4px #6e96c7, 0 0 4px #6e96c7, inset 0 2px 4px rgba(0,0,0,0.16);
54
+ }
55
+ form input[type=search]::-webkit-search-cancel-button
56
+ {
57
+ z-index: 9;
58
+ position: absolute;
59
+ right: 6px;
60
+ top: 6px;
61
+ width: 32px;
62
+ height: 32px;
63
+ margin: 0;
64
+ padding: 0;
65
+ background: url(images/cancel.svg);
66
+ -webkit-appearance: none;
67
+ }
68
+ form input[type=search]::-webkit-search-cancel-button:active
69
+ {
70
+ background-position: 0 -32px;
71
+ }
72
+ form input[type=search]::-webkit-search-cancel-button
73
+ {
74
+ /* outline: 1px dashed red !important;*/
75
+ }
76
+ form input[type=button]
77
+ {
78
+ background: rgba(0,0,0,0.01);
79
+ font-size: 1.2em;
80
+ z-index: 2;
81
+ display: block;
82
+ position: absolute;
83
+ padding-right: 0.8em;
84
+ right: 0;
85
+ width: 130px;
86
+ color: #606068;
87
+ text-align: right;
88
+ text-shadow: 0 1px 0 rgba(255,255,255,0.8);
89
+ -webkit-transition: background 0.15s ease-in;
90
+ }
91
+ form input[type=button]:active
92
+ {
93
+ background: rgba(0,0,0,0.08);
94
+ -webkit-transition-duration: 0;
95
+ }
96
+ form .status {
97
+ background: rgba(0,0,0,0.0);
98
+ z-index: 2;
99
+ display: block;
100
+ position: absolute;
101
+ left: 0;
102
+ width: 100px;
103
+ line-height: 46px;
104
+ padding-right: 2em;
105
+ text-align: right;
106
+ font-size: 1.5em;
107
+ }
108
+ .picky form.empty .status {
109
+ background-color: hsl(215, 51%, 70%); }
110
+ .picky form.empty .feedback {
111
+ background-color: #d0e2ff; }
112
+ .picky form.none .status {
113
+ background-color: hsl(6, 51%, 70%); }
114
+ .picky form.none .feedback {
115
+ background-color: #ffdddd; }
116
+ .picky form.support .status {
117
+ background-color: hsl(29, 51%, 70%); }
118
+ .picky form.support .feedback {
119
+ background-color: #faf3d0; }
120
+ .picky form.ok .status {
121
+ background-color: hsl(82, 51%, 70%); }
122
+ .picky form.ok .feedback {
123
+ background-color: #bcf0b3; }
124
+ .picky form .feedback {
125
+ width: 85%;
126
+ float: left;
127
+ border: 1px solid #cccccc;
128
+ padding: 0;
129
+ margin: 0; }
130
+
131
+ /* To the top */
132
+ .picky .header .tothetop {
133
+ float: right;
134
+ }
135
+ .picky .header .tothetop a {
136
+ display: block;
137
+ width: 20px;
138
+ height: 20px;
139
+ text-align: center;
140
+ margin-left: 1em;
141
+ border-radius: 5px;
142
+ background-color: #EEE;
143
+ text-decoration: none;
144
+ font-size: 1em;
145
+ font-weight: bold;
146
+ color: #777;
147
+ }
148
+ .picky .header .tothetop a:hover {
149
+ background-color: white;
150
+ }
151
+
152
+ /* Addination */
153
+ .picky .addination {
154
+ line-height: 2em;
155
+ text-align: center;
156
+ cursor: pointer;
157
+ }
158
+ .picky .addination:hover {
159
+ background-color: #eee;
160
+ }
161
+
162
+ /* Allocations */
163
+ .picky .allocations ol {
164
+ margin-bottom: 10px;
165
+ }
166
+ .picky ol {
167
+ cursor: pointer;
168
+ list-style-type: none;
169
+ margin: 0;
170
+ padding: 0;
171
+ }
172
+ .picky li:hover {
173
+ background-color: #eee;
174
+ }
175
+ .picky ol.more,
176
+ .picky ol.hidden {
177
+ margin-top: 3px;
178
+ }
179
+ .picky .allocations ol.hidden {
180
+ display: none; }
181
+ .picky .allocations ol.more:hover {
182
+ background-color: #ccc;
183
+ cursor: pointer; }
184
+ .picky .allocations ol {
185
+ list-style-position: outside;
186
+ list-style: none;
187
+ padding: 0;}
188
+
189
+ .picky .allocations li {
190
+ font-size: 1.2em;
191
+ padding: 24px;
192
+ overflow: hidden;
193
+ border-bottom: 1px solid rgba(0,0,0,0.1);
194
+ }
195
+ .picky .allocations li:last-child {
196
+ border-bottom: 0px;
197
+ margin-bottom: 0;
198
+ }
199
+ .picky .allocations .text {
200
+ max-width: 90%;
201
+ float: left; }
202
+ .picky .allocations .count {
203
+ float: right;
204
+ color: #cccccc; }
205
+
206
+ .picky .results .header {
207
+ padding: 0.5em;
208
+ background-color: rgba(0, 0, 0, 0.04);
209
+ background: -webkit-gradient(radial, 0% 100%, 90, 0% 100%, 600, from(rgba(0, 0, 0, 0.02)), to(rgba(0, 0, 0, 0.1)));
210
+ text-align: right;
211
+ }
212
+ .picky .allocations,
213
+ .picky .no_results,
214
+ .picky .results,
215
+ .picky .more {
216
+ display: none;
217
+ margin: 0 1.5em;
218
+ padding: 0 0 0 0;
219
+ background-color: rgba(0, 0, 0, 0.02);
220
+ border-bottom-left-radius: 1em;
221
+ border-bottom-right-radius: 1em;
222
+ border-bottom: solid 1px #b8b8ba;
223
+ box-shadow: inset 0 1px 3px rgba(255,255,255,0), 0 1px 3px rgba(0,0,0,0.16);
224
+ }
225
+ .picky ol.more, .picky .no_results {
226
+ display: none;
227
+ }
228
+ .picky ol.more h3, .picky .no_results h3 {
229
+ margin: 0;
230
+ text-align: center;
231
+ }
232
+ .picky .allocations .more {
233
+ position: absolute;
234
+ font-weight: bold;
235
+ line-height: 1.1em;
236
+ padding: 0.2em 1em 0.4em;
237
+ margin: 0 16.5%;
238
+ -moz-border-radius-bottomleft: 20px;
239
+ -webkit-border-bottom-left-radius: 20px;
240
+ -o-border-bottom-left-radius: 20px;
241
+ -ms-border-bottom-left-radius: 20px;
242
+ -khtml-border-bottom-left-radius: 20px;
243
+ border-bottom-left-radius: 20px;
244
+ -moz-border-radius-bottomright: 20px;
245
+ -webkit-border-bottom-right-radius: 20px;
246
+ -o-border-bottom-right-radius: 20px;
247
+ -ms-border-bottom-right-radius: 20px;
248
+ -khtml-border-bottom-right-radius: 20px;
249
+ border-bottom-right-radius: 20px;
250
+ border-left-width: 1px;
251
+ border-right-width: 1px;
252
+ border-bottom-width: 2px;
253
+ }
254
+
255
+ /* Results */
256
+ .picky .results li {
257
+ margin: 0;
258
+ padding: 1em;
259
+ border-bottom: 1px solid #aaa;
260
+ }
261
+ .picky .results li:last-child {
262
+ border-bottom: 0px;
263
+ }
264
+ .picky .results li h3 {
265
+ margin-top: 0;
266
+ }
267
+ .picky .results li h3 a:link,
268
+ .picky .results li h3 a:visited {
269
+ color: black;
270
+ text-decoration: none;
271
+ }
272
+ .picky .results li h3 a:hover {
273
+ text-decoration: underline;
274
+ }
275
+ .picky .no_results {
276
+ padding: 1em;
277
+ }