/static/jqtouch/jqtouch.css

  1body {
  2    margin: 0;
  3    font-family: Helvetica;
  4    overflow-x: hidden;
  5    -webkit-user-select: none;
  6	-webkit-touch-callout: none;
  7    -webkit-text-size-adjust: none;
  8    background-color: #000;
  9}
 10
 11*, a {
 12	/*-webkit-tap-highlight-color: rbga(23,126,191,.5) !important;*/
 13	-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
 14}
 15
 16.edgetoedge a, .panel a {
 17	/*-webkit-tap-highlight-color: rbga(23,126,191,.5) !important;*/
 18	-webkit-tap-highlight-color:rgba(23, 126, 191, .4);
 19}
 20
 21body > * {
 22    display: none;
 23    position: absolute;
 24    margin: 0;
 25    padding: 0;
 26    left: 0;
 27    width: 100%;
 28    min-height: 480px;
 29    -webkit-transform: translate(0px,0px);
 30    background-color: #fff;
 31}
 32
 33body[orient="landscape"] > * {
 34    min-height: 320px;
 35}
 36
 37body > *[selected="true"], body > *[selected="selected"] {
 38    display: block;
 39}
 40
 41.edgetoedge a[selected=true], .edgetoedge a:active, .panel a[selected=true], .panel a:active {
 42    background-color: rgb(170,170,238) !important;
 43}
 44
 45a[selected="progress"] {
 46   background-color: rgb(170,170,238) !important;
 47   background-image: url(img/loading.gif) !important;
 48   background-repeat: no-repeat !important;
 49   background-position: right center !important;
 50}
 51
 52/* @group Toolbar */
 53.toolbar {
 54    -webkit-box-sizing: border-box;
 55    padding: 10px;
 56    /* height: 60px; */
 57    /* padding-top: 28px; */
 58    /* background: #000 url(img/toolbar.gif) bottom left repeat-x; */
 59    height: 42px;
 60    background: rgb(44,49,67);
 61    position: relative;
 62}
 63
 64.toolbar > h1 {
 65    position: absolute;
 66    overflow: hidden;
 67    left: 50%;
 68    margin: 1px 0 0 -75px;
 69    height: 45px;
 70    font-size: 20px;
 71    width: 150px;
 72    font-weight: bold;
 73    /*text-shadow: rgba(0, 0, 0, .75) -1px -1px 0;*/
 74    text-align: center;
 75    text-overflow: ellipsis;
 76    white-space: nowrap;
 77    color: #f6f6f6;
 78}
 79
 80body[orient="landscape"] .toolbar > h1 {
 81    margin-left: -125px;
 82    width: 250px;
 83}
 84
 85/* @end */
 86
 87.button {
 88    position: absolute;
 89    overflow: hidden;
 90    bottom: 5px;
 91    right: 6px;
 92    margin: 0;
 93    border-width: 0 5px;
 94    padding: 0 3px;
 95    width: auto;
 96    height: 30px;
 97    line-height: 30px;
 98    font-family: inherit;
 99    font-size: 12px;
100    font-weight: bold;
101    color: #FFFFFF;
102    text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 0;
103    text-overflow: ellipsis;
104    text-decoration: none;
105    white-space: nowrap;
106    background: none;
107    -webkit-border-image: url(img/button.png) 0 5 0 5;
108}
109
110.button:active {
111	    -webkit-border-image: url(img/button_clicked.png) 0 5 0 5;
112
113}
114
115.blueButton {
116    -webkit-border-image: url(img/blueButton.png) 0 5 0 5;
117    border-width: 0 5px;
118}
119
120.leftButton {
121    left: 6px;
122    right: auto;
123}
124
125.toolbar .back {
126    left: 6px;
127    right: auto;
128    padding: 0;
129    max-width: 55px;
130    border-width: 0 8px 0 15px;
131    -webkit-border-image: url(img/back_button.png) 0 8 0 15;
132}
133
134.toolbar .back:active {
135    -webkit-border-image: url(img/back_button_clicked.png) !important;
136}
137
138.whiteButton,
139.grayButton {
140    display: block;
141    border-width: 0 12px;
142    padding: 10px;
143    text-align: center;
144    font-size: 20px;
145    font-weight: bold;
146    text-decoration: inherit;
147    color: inherit;
148}
149
150.whiteButton {
151    -webkit-border-image: url(img/whiteButton.png) 0 12 0 12;
152    text-shadow: rgba(255, 255, 255, 0.7) 0 1px 0;
153}
154
155.grayButton {
156    -webkit-border-image: url(img/grayButton.png) 0 12 0 12;
157    color: #FFFFFF;
158}
159
160
161/* @group Edge to edge */
162
163.edgetoedge { 
164	margin: 0;
165	padding: 0;
166	background-color: #fff;
167}
168
169.edgetoedge > li {
170    position: relative;
171    margin: 0;
172    border-bottom: 1px solid #E0E0E0;
173    padding: 8px 0 8px 10px;
174    font-size: 20px;
175    font-weight: bold;
176    list-style: none;
177    /* background: url(../img/bg_row.gif) 0 2px repeat-x; */
178    color: #999;
179}
180
181.edgetoedge > li.group {
182    position: relative;
183    top: -1px;
184    margin-bottom: -2px;
185    border-top: 1px solid #7d7d7d;
186    border-bottom: 1px solid #999999;
187    padding: 1px 10px;
188    background: url(img/listGroup.png) repeat-x;
189    font-size: 17px;
190    font-weight: bold;
191    text-shadow: rgba(0, 0, 0, 0.4) 0 1px 0;
192    color: #FFFFFF;
193}
194
195.edgetoedge > li.group:first-child, .inset > li.group:first-child {
196    top: 0;
197    border-top: none;
198}
199
200.edgetoedge a, .inset a {
201    display: block;
202    margin: -8px 0 -8px -10px;
203    padding: 8px 32px 8px 10px;
204    text-decoration: none;
205    color: #000;
206    /*
207    background-image:  url(img/bg_row.gif), url(img/chevron.png);
208    background-repeat: repeat-x, no-repeat;
209    background-position: 0 1px, right center;
210    */
211    background-image: url(img/chevron.png);
212    background-repeat: no-repeat;
213    background-position: right center;
214}
215/* @end */
216
217a[target="_replace"] {
218    box-sizing: border-box;
219    -webkit-box-sizing: border-box;
220    padding-top: 25px;
221    padding-bottom: 25px;
222    font-size: 18px;
223    color: cornflowerblue;
224    background-color: #FFFFFF;
225    background-image: none;
226}
227    
228body > .dialog {
229    top: 0;
230    width: 100%;
231    min-height: 417px;
232    z-index: 2;
233    background: rgba(0, 0, 0, 0.8);
234    padding: 0;
235    text-align: right;
236}
237
238.dialog > fieldset {
239    box-sizing: border-box;
240    -webkit-box-sizing: border-box;
241    width: 100%;
242    margin: 0;
243    border: none;
244    border-top: 1px solid #6d84a2;
245    padding: 10px 6px;
246    background: url(img/toolbar.png) #7388a5 repeat-x;
247}
248
249.dialog > fieldset > h1 {
250    margin: 0 10px 0 10px;
251    padding: 0;
252    font-size: 20px;
253    font-weight: bold;
254    color: #FFFFFF;
255    text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0;
256    text-align: center;
257}
258
259.dialog > fieldset > label {
260    position: absolute;
261    margin: 16px 0 0 6px;
262    font-size: 14px;
263    color: #999999;
264}
265
266input {
267    box-sizing: border-box;
268    -webkit-box-sizing: border-box;
269    width: 100%;
270    margin: 8px 0 0 0;
271    padding: 6px 6px 6px 44px;
272    font-size: 16px;
273    font-weight: normal;
274}
275
276
277.panel {
278    box-sizing: border-box;
279    -webkit-box-sizing: border-box;
280    background: #c8c8c8 url(img/pinstripes.png);
281    overflow: auto;
282}
283
284.pad {
285	padding: 15px;
286}
287
288.panel fieldset {
289    position: relative;
290    margin: 0 0 20px 0;
291    padding: 0;
292    background: #FFFFFF;
293    -webkit-border-radius: 10px;
294    border: 1px solid #999999;
295    /* text-align: right; */
296    font-size: 16px;
297}
298
299.row  {
300    position: relative;
301    min-height: 42px;
302    border-bottom: 1px solid #999999;
303    -webkit-border-radius: 0;
304    /* text-align: right; */
305}
306
307fieldset .row:last-child {
308    border-bottom: none !important;
309}
310
311.row > input {
312    box-sizing: border-box;
313    -webkit-box-sizing: border-box;
314    margin: 0;
315    border: none;
316    padding: 12px 10px 0 110px;
317    min-height: 42px;
318    background: none;
319}
320
321.row > span {
322    display: block;
323    text-align: left;
324    box-sizing: border-box;
325    -webkit-box-sizing: border-box;
326    margin: 0;
327    border: none;
328    padding: 12px 10px 10px 110px;
329    min-height: 42px;
330    background: none;
331}
332
333.row > a {
334    display: block;
335    height: 42px;
336    text-decoration: none;
337    padding: 0 0 0 14px;
338    line-height: 42px;
339    font-weight: bold;
340    color: #000;
341    background-image: url(img/chevron.png);
342    background-repeat: no-repeat;
343    background-position: right center;
344}
345
346.row > label {
347    position: absolute;
348    margin: 0 0 0 14px;
349    line-height: 42px;
350    font-weight: bold;
351}
352
353.row > .toggle {
354    position: absolute;
355    top: 6px;
356    right: 6px;
357    width: 100px;
358    height: 28px;
359}
360
361.toggle {
362    border: 1px solid #888888;
363    -webkit-border-radius: 6px;
364    background: #FFFFFF url(img/toggle.png) repeat-x;
365    font-size: 19px;
366    font-weight: bold;
367    line-height: 30px;
368}
369
370.toggle[toggled="true"] {
371    border: 1px solid #143fae;
372    background: #194fdb url(img/toggleOn.png) repeat-x;
373}
374
375.toggleOn {
376    display: none;
377    position: absolute;
378    width: 60px;
379    text-align: center;
380    left: 0;
381    top: 0;
382    color: #FFFFFF;
383    text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0;
384}
385
386.toggleOff {
387    position: absolute;
388    width: 60px;
389    text-align: center;
390    right: 0;
391    top: 0;
392    color: #666666;
393}
394
395.toggle[toggled="true"] > .toggleOn {
396    display: block;
397}
398
399.toggle[toggled="true"] > .toggleOff {
400    display: none;
401}
402
403.thumb {
404    position: absolute;
405    top: -1px;
406    left: -1px;
407    width: 40px;
408    height: 28px;    
409    border: 1px solid #888888;
410    -webkit-border-radius: 6px;
411    background: #ffffff url(img/thumb.png) repeat-x;
412}
413
414.toggle[toggled="true"] > .thumb {
415    left: auto;
416    right: -1px;
417}
418
419.panel h2 {
420    margin: 0 0 8px 14px;
421    font-size: inherit;
422    font-weight: bold;
423    color: rgb(17, 20, 23, .5);
424    text-shadow: rgba(255, 255, 255, 0.75) 1px 1px 0;
425}
426
427.panel p a {
428	color: #4195ca;
429}
430
431#about {
432	background: rgb(17, 20, 23);
433	color: #ddd;
434    text-shadow: rgba(255, 255, 255, 0.3) 0px -1px 0;
435    font-size: 20px;
436}