source: spip-zone/_plugins_/_test_/ispip/ispip_css.html @ 19790

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