source: spip-zone/_plugins_/medias_responsive_mod/squelettes/css/medias_responsive.css @ 104547

Last change on this file since 104547 was 104547, checked in by arno@…, 23 months ago

Introduction du raccourci <slideXXX>

File size: 7.6 KB
Line 
1.spip_documents_left, .spip_documents_right {
2        margin-top: 0.5em;
3        margin-bottom: 0.5em;
4}
5.spip_documents_center {
6        display: block;
7        margin-left: auto;
8        margin-right: auto;
9        text-align: center;
10}
11
12.spip_documents_right {
13        float: right;
14        clear: right;
15        margin-left: 2em;
16}
17.spip_documents_left {
18        float: left;
19        clear: left;
20        margin-right: 2em;
21}
22.spip_documents_center_forcer {
23        float: none !important;
24        margin: 1em auto !important;
25}
26.spip_documents a {
27        display: block;
28}
29.spip_documents .logo_document {
30        display: block;
31        margin-left: auto;
32        margin-right: auto;
33}
34.spip_documents_shape {
35        -webkit-shape-margin: 2em;
36        shape-margin: 2em;
37}
38.spip_documents_shape picture {
39        z-index: -1;
40}
41.spip_documents.rond {
42        -webkit-shape-margin: 2em;
43        shape-margin: 2em;
44        -webkit-shape-outside: content-box circle(50%);
45        shape-outside: content-box circle(50%);
46}
47.spip_documents.rond picture {
48        overflow: hidden;
49        -webkit-border-radius: 50%;
50        -moz-border-radius: 50%;
51        -ms-border-radius: 50%;
52        border-radius: 50%;
53}
54.spip_documents.kenburns:not(.rond) picture {
55        overflow: hidden;
56}
57.spip_documents.kenburns_actif picture img {
58        -webkit-transform: scale(2);
59    -webkit-animation-name: kenburns;
60    -webkit-animation-duration: 10s;
61    -webkit-animation-timing-function: ease-in-out;
62        transform: scale(2);
63    animation-name: kenburns;
64    animation-duration: 10s;
65    animation-timing-function: ease-in-out;
66}
67.spip_documents.kenburns_actif picture img {
68}
69@-webkit-keyframes kenburns {
70        from {-webkit-transform: scale(1);}
71        to {-webkit-transform: scale(2);}
72}
73@keyframes kenburns {
74        from {transform: scale(1);}
75        to {transform: scale(2);}
76}
77
78.spip_documents_flip {
79        -webkit-perspective: 500px;
80        perspective: 500px;
81}
82.spip_documents_flip picture {
83        -webkit-transform: rotateY(450deg);
84        transform: rotateY(450deg);
85}
86.spip_documents_flip_actif picture {
87        -webkit-transform: rotateY(0);
88        transform: rotateY(0);
89        -webkit-transform-origin: center center;
90        transform-origin: center center;
91         -webkit-transform-style: preserve-3d;
92          transform-style: preserve-3d;
93       
94    -webkit-animation-name: spipflip;
95    -webkit-animation-duration: 1s;
96    -webkit-animation-timing-function: ease-out;
97    animation-name: spipflip;
98    animation-duration: 1s;
99    animation-timing-function: ease-out;
100}
101
102.col_deux_trois .spip_documents_flip_actif picture,
103.col_deux_quatre .spip_documents_flip_actif picture,
104.col_droite .spip_documents_flip_actif picture
105{
106    -webkit-animation-duration: 1.5s;
107    animation-duration: 1.5s;
108}
109.col_trois_trois .spip_documents_flip_actif picture,
110.col_trois_quatre .spip_documents_flip_actif picture
111{
112    -webkit-animation-duration: 2s;
113    animation-duration: 2s;
114}
115.col_quatre_quatre .spip_documents_flip_actif picture
116{
117    -webkit-animation-duration: 2.5s;
118    animation-duration: 2.5s;
119}
120
121
122@-webkit-keyframes spipflip {
123        from {-webkit-transform: rotateY(450deg); -webkit-opacity: 1;}
124        to {-webkit-transform: rotateY(0deg);-webkit-opacity: 1;}
125}
126@keyframes spipflip {
127        from {transform: rotateY(450deg); opacity: 1;}
128        to {transform: rotateY(0deg); opacity: 1}
129}
130
131ul.portfolio_ligne {
132        margin-bottom: 2em;
133}
134.spip_documents_ligne {
135        margin: 0;
136        clear: both;
137}
138* + ul.portfolio_ligne {
139        margin-top: 2em;
140}
141ul.portfolio_ligne:after {
142        content: "";
143        display:block;
144        clear: left;
145}
146ul.portfolio_ligne li {
147        float: left;
148        margin-right: 10px;
149}
150ul.portfolio_ligne li .fond {
151                width: 100%;
152                height: 300px;
153                display: block;
154}
155.label_ligne_precedent {
156        float: left;
157}
158.label_ligne_suivant {
159        float: right;
160}
161.label_ligne_precedent span, .label_ligne_suivant span {
162        font-weight: bold;
163        font-size: 70%;
164        display: inline-block;
165        transform: translate(0%, -0.25em);
166}
167.label_ligne_precedent:hover span, .label_ligne_suivant:hover span {
168        text-decoration: underline;
169}
170.label_ligne {
171        display: none;
172        padding-top: 5px;
173}
174
175
176.portfolio_slide_radio {
177        display: none;
178}
179ul.portfolio_slide {
180        clear: both;
181        transition: transform 0.3s;
182        transform: translate(0%,0);
183}
184input.portfolio_slide_radio.sel0:checked ~ .label_ligne_0 { display: block; }
185input.portfolio_slide_radio.sel1:checked ~ ul.portfolio_slide { transform: translate(-101%,0); }
186input.portfolio_slide_radio.sel1:checked ~ .label_ligne_1 { display: block; }
187input.portfolio_slide_radio.sel2:checked ~ ul.portfolio_slide { transform: translate(-202%,0); }
188input.portfolio_slide_radio.sel2:checked ~ .label_ligne_2 { display: block; }
189input.portfolio_slide_radio.sel3:checked ~ ul.portfolio_slide { transform: translate(-303%,0); }
190input.portfolio_slide_radio.sel3:checked ~ .label_ligne_3 { display: block; }
191input.portfolio_slide_radio.sel4:checked ~ ul.portfolio_slide { transform: translate(-404%,0); }
192input.portfolio_slide_radio.sel4:checked ~ .label_ligne_4 { display: block; }
193input.portfolio_slide_radio.sel5:checked ~ ul.portfolio_slide { transform: translate(-505%,0); }
194input.portfolio_slide_radio.sel5:checked ~ .label_ligne_5 { display: block; }
195input.portfolio_slide_radio.sel6:checked ~ ul.portfolio_slide { transform: translate(-606%,0); }
196input.portfolio_slide_radio.sel6:checked ~ .label_ligne_6 { display: block; }
197input.portfolio_slide_radio.sel7:checked ~ ul.portfolio_slide { transform: translate(-707%,0); }
198input.portfolio_slide_radio.sel7:checked ~ .label_ligne_7 { display: block; }
199input.portfolio_slide_radio.sel8:checked ~ ul.portfolio_slide { transform: translate(-808%,0); }
200input.portfolio_slide_radio.sel8:checked ~ .label_ligne_8 { display: block; }
201
202ul.portfolio_slide:after {
203        content: " ";
204        display: block;
205        width: 100%;
206        height: 1px;
207        clear: left;
208}
209.portfolio_slide_container:after {
210        content: " ";
211        display: block;
212        width: 100%;
213        height: 1px;
214        clear: both;
215        margin-bottom: 2em;
216}
217ul.portfolio_slide li {
218        position: relative;
219        float: left;
220        width: 100%;
221        margin-right: -100%;
222}
223ul.portfolio_slide li+li { transform:translate(101%,0); }
224ul.portfolio_slide li+li+li { transform:translate(202%,0); }
225ul.portfolio_slide li+li+li+li { transform:translate(303%,0); }
226ul.portfolio_slide li+li+li+li+li { transform:translate(404%,0); }
227ul.portfolio_slide li+li+li+li+li+li { transform:translate(505%,0); }
228ul.portfolio_slide li+li+li+li+li+li+li { transform:translate(606%,0); }
229ul.portfolio_slide li+li+li+li+li+li+li+li { transform:translate(707%,0); }
230ul.portfolio_slide li+li+li+li+li+li+li+li+li { transform:translate(808%,0); }
231
232
233[dir=rtl] ul.portfolio_slide li+li { transform:translate(-101%,0); }
234[dir=rtl] ul.portfolio_slide li+li+li { transform:translate(-202%,0); }
235[dir=rtl] ul.portfolio_slide li+li+li+li { transform:translate(-303%,0); }
236[dir=rtl] ul.portfolio_slide li+li+li+li+li { transform:translate(-404%,0); }
237[dir=rtl] ul.portfolio_slide li+li+li+li+li+li { transform:translate(-505%,0); }
238[dir=rtl] ul.portfolio_slide li+li+li+li+li+li+li { transform:translate(-606%,0); }
239[dir=rtl] ul.portfolio_slide li+li+li+li+li+li+li+li { transform:translate(-707%,0); }
240[dir=rtl] ul.portfolio_slide li+li+li+li+li+li+li+li+li { transform:translate(-808%,0); }
241[dir=rtl] input.portfolio_slide_radio.sel1:checked ~ ul.portfolio_slide { transform: translate(101%,0); }
242[dir=rtl] input.portfolio_slide_radio.sel2:checked ~ ul.portfolio_slide { transform: translate(202%,0); }
243[dir=rtl] input.portfolio_slide_radio.sel3:checked ~ ul.portfolio_slide { transform: translate(303%,0); }
244[dir=rtl] input.portfolio_slide_radio.sel4:checked ~ ul.portfolio_slide { transform: translate(404%,0); }
245[dir=rtl] input.portfolio_slide_radio.sel5:checked ~ ul.portfolio_slide { transform: translate(505%,0); }
246[dir=rtl] input.portfolio_slide_radio.sel6:checked ~ ul.portfolio_slide { transform: translate(606%,0); }
247[dir=rtl] input.portfolio_slide_radio.sel7:checked ~ ul.portfolio_slide { transform: translate(707%,0); }
248[dir=rtl] input.portfolio_slide_radio.sel8:checked ~ ul.portfolio_slide { transform: translate(808%,0); }
249
Note: See TracBrowser for help on using the repository browser.