source: spip-zone/_squelettes_/ispip/ispip_css.html

Last change on this file was 32709, checked in by jsb92@…, 10 years ago

nouvelles fonctions, gestion des breves, et des evenements (necessite plugin agenda2)
J espere ne pas avoir tout casse :(

File size: 10.0 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 > .intro_rubrique {
200    background: #c8c8c8 url(#CHEMIN{img_ispip/pinstripes.png});
201    margin: 0 !important;
202    padding: 0 !important;
203}
204
205
206body > ul > .intro_rubrique > .descriptif, body > ul > .intro_rubrique > .cartouche, body > ul > .intro_rubrique > .texte {
207    padding: 5px;
208}
209
210body > ul > li.group:first-child {
211    top: 0;
212    border-top: none;
213}
214
215body > ul > li > a {
216    display: block;
217    margin: -8px 0 -8px -10px;
218    padding: 8px 32px 8px 10px;
219    text-decoration: none;
220    color: inherit;
221    background: url(#CHEMIN{img_ispip/listArrow.png}) no-repeat right center;
222}
223
224body > ul > li > a[target="_replace"] {
225    box-sizing: border-box;
226    -webkit-box-sizing: border-box;
227    padding-top: 25px;
228    padding-bottom: 25px;
229    font-size: 18px;
230    color: cornflowerblue;
231    background-color: #FFFFFF;
232    background-image: none;
233}
234
235/************************************************************************************************/
236   
237body > .dialog {
238    top: 0;
239    width: 100%;
240    min-height: 417px;
241    z-index: 2;
242    background: rgba(0, 0, 0, 0.8);
243    padding: 0;
244    text-align: right;
245}
246
247.dialog > fieldset {
248    box-sizing: border-box;
249    -webkit-box-sizing: border-box;
250    width: 100%;
251    margin: 0;
252    border: none;
253    border-top: 1px solid #6d84a2;
254    padding: 10px 6px;
255    background: url(#CHEMIN{img_ispip/toolbar.png}) #7388a5 repeat-x;
256}
257
258.dialog > fieldset > h1 {
259    margin: 0 10px 0 10px;
260    padding: 0;
261    font-size: 20px;
262    font-weight: bold;
263    color: #FFFFFF;
264    text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0;
265    text-align: center;
266}
267
268.dialog > fieldset > label {
269    position: absolute;
270    margin: 16px 0 0 6px;
271    font-size: 14px;
272    color: #999999;
273}
274
275input {
276    box-sizing: border-box;
277    -webkit-box-sizing: border-box;
278    width: 100%;
279    margin: 8px 0 0 0;
280    padding: 6px 6px 6px 44px;
281    font-size: 16px;
282    font-weight: normal;
283}
284
285/************************************************************************************************/
286
287body > .panel {
288    box-sizing: border-box;
289    -webkit-box-sizing: border-box;
290    padding: 10px;
291    background: #c8c8c8 url(#CHEMIN{img_ispip/pinstripes.png});
292}
293
294.panel > fieldset {
295    position: relative;
296    margin: 0 0 20px 0;
297    padding: 0;
298    background: #FFFFFF;
299    -webkit-border-radius: 8px;
300    border: 1px solid #999999;
301    text-align: right;
302    font-size: 16px;
303}
304
305.row  {
306    position: relative;
307    min-height: 42px;
308    border-bottom: 1px solid #999999;
309    -webkit-border-radius: 0;
310    text-align: right;
311}
312
313fieldset > .row:last-child {
314    border-bottom: none !important;
315}
316
317.row > input {
318    box-sizing: border-box;
319    -webkit-box-sizing: border-box;
320    margin: 0;
321    border: none;
322    padding: 12px 10px 0 110px;
323    height: 42px;
324    background: none;
325}
326
327.row > label {
328    position: absolute;
329    margin: 0 0 0 14px;
330    line-height: 42px;
331    font-weight: bold;
332}
333
334.row > .toggle {
335    position: absolute;
336    top: 6px;
337    right: 6px;
338    width: 100px;
339    height: 28px;
340}
341
342/* PANEL LIST */
343
344.panel > ul {
345        list-style: none;
346    position: relative;
347    margin: 0 0 20px 0;
348    padding: 0;
349    background: #FFFFFF;
350    -webkit-border-radius: 8px;
351    border: 1px solid #999999;
352    font-size: 16px;
353}
354
355.panel > ul > li {
356    position: relative;
357    min-height: 42px;
358    border-bottom: 1px solid #999999;
359    -webkit-border-radius: 0;
360}
361
362.panel > ul > li > a {
363    display: block;
364    margin: ;
365    padding: 11px 32px 8px 10px;
366    text-decoration: none;
367    color: inherit;
368    background: url(#CHEMIN{img_ispip/listArrow.png}) no-repeat right center;
369}
370
371.panel > ul > li > span {
372    display: block;
373    padding: 11px 32px 8px 10px;
374    color: gray;
375}
376
377
378
379/* ####################################################### */
380
381
382
383body > ul > li > a.toggle {
384    border: 1px solid #888888;
385    -webkit-border-radius: 6px;
386    background: #FFFFFF url(#CHEMIN{img_ispip/toggle.png}) repeat-x;
387    font-size: 19px;
388    font-weight: bold;
389    line-height: 30px;
390}
391
392body > ul > li > a.toggle[toggled="true"] {
393    border: 1px solid #143fae;
394    background: #194fdb url(#CHEMIN{img_ispip/toggleOn.png}) repeat-x;
395}
396
397body > ul > li > a.toggleOn {
398    display: none;
399    position: absolute;
400    width: 60px;
401    text-align: center;
402    left: 0;
403    top: 0;
404    color: #FFFFFF;
405    text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0;
406}
407
408body > ul > li > a.toggleOff {
409    position: absolute;
410    width: 60px;
411    text-align: center;
412    right: 0;
413    top: 0;
414    color: #666666;
415}
416
417body > ul > li > a.toggle[toggled="true"] > .toggleOn {
418    display: block;
419}
420
421body > ul > li > a.toggle[toggled="true"] > .toggleOff {
422    display: none;
423}
424
425.thumb {
426    position: absolute;
427    top: -1px;
428    left: -1px;
429    width: 40px;
430    height: 28px;   
431    border: 1px solid #888888;
432    -webkit-border-radius: 6px;
433    background: #ffffff url(#CHEMIN{img_ispip/thumb.png}) repeat-x;
434}
435
436body > ul > li > a.toggle[toggled="true"] > .thumb {
437    left: auto;
438    right: -1px;
439}
440
441.panel > h2 {
442    margin: 0 0 8px 14px;
443    font-size: inherit;
444    font-weight: bold;
445    color: #4d4d70;
446    text-shadow: rgba(255, 255, 255, 0.75) 2px 2px 0;
447}
448
449.descriptif {
450        font-style:italic;
451}
452
453form.panel {
454        margin:0px;
455}
456
457/************************************************************************************************/
458
459#preloader {
460    display: none;
461    background-image: url(#CHEMIN{img_ispip/loading.gif}), url(#CHEMIN{img_ispip/selection.png}),
462        url(#CHEMIN{img_ispip/blueButton.png}), url(#CHEMIN{img_ispip/listArrowSel.png}), url(#CHEMIN{img_ispip/listGroup.png});
463}
464
465/************************************************************************************************/
466
467.ispip-even {font-weight:normal;font-size:12px}
Note: See TracBrowser for help on using the repository browser.