source: spip-zone/_squelettes_/soyezcreateurs_net/trunk/plugins/soyezcreateurs/stylesportailcognac.css.html @ 103515

Last change on this file since 103515 was 103515, checked in by real3t@…, 3 years ago

Ajustement de la taille de la flèche sur les gros blocs

File size: 14.5 KB
Line 
1#CACHE{24*3600,cache-client}
2#HTTP_HEADER{Content-Type: text/css; charset=iso-8859-15}
3#HTTP_HEADER{Vary: Accept-Encoding}
4
5#SET{c_vignettes_bk,(#CONFIG{soyezcreateurs_couleurs/vignettes_bk,#ffffff})}
6#SET{c_navigation,(#CONFIG{soyezcreateurs_couleurs/navigation,#017ca5})}
7        #SET{c_navigation_bk,(#CONFIG{soyezcreateurs_couleurs/navigation_bk,#ffffff})}
8#SET{c_menuhaut,(#CONFIG{soyezcreateurs_couleurs/menuhaut,#017ca5})}
9        #SET{c_menuhaut_bk,(#CONFIG{soyezcreateurs_couleurs/menuhaut_bk,#ffffff})}
10#SET{c_extra,(#CONFIG{soyezcreateurs_couleurs/extra,#017ca5})}
11        #SET{c_extra_bk,(#CONFIG{soyezcreateurs_couleurs/extra_bk,#ffffff})}
12#SET{c_menu_a,(#CONFIG{soyezcreateurs_couleurs/menu_a,#005e7a})}
13        #SET{c_menu_a_bk,(#CONFIG{soyezcreateurs_couleurs/menu_a_bk,#ffffff})}
14
15#SET{LargeurContaineur,(#CONFIG{soyezcreateurs_layout/largeurconteneur,960})}
16#SET{LargeurMenuGauche,(#CONFIG{soyezcreateurs_layout/largeurmenugauche,180})}
17#SET{LargeurMenuDroit,(#CONFIG{soyezcreateurs_layout/largeurmenudroit,180})}
18#SET{LargeurMilieu,(#GET{LargeurContaineur}|moins{#GET{LargeurMenuGauche}}|moins{#GET{LargeurMenuDroit}}|div{2})}
19
20div#content { width: 100%; }
21
22
23.portailcognac {
24  /* clearfix */
25  /* ---- grid ---- */
26  /* ---- grid-item ---- */
27}
28.portailcognac iframe {
29  width: 100%;
30}
31.portailcognac img {
32  display: inline-block;
33  vertical-align: middle;
34  max-width: 100%;
35  height: auto;
36  -ms-interpolation-mode: bicubic;
37}
38.portailcognac :focus {
39  outline: none;
40}
41.portailcognac select {
42  cursor: pointer;
43}
44.portailcognac .spip_logo {
45  max-width: 100%;
46}
47.portailcognac .ariaformprop {
48  padding: 0;
49  margin: 0;
50  position: relative;
51  z-index: 99;
52  background-color: white;
53  font-size: 80%;
54}
55.portailcognac .ajaxbloc {
56  height: 100%;
57}
58.portailcognac .row {
59  margin-right: auto;
60  margin-left: auto;
61}
62.portailcognac .text-center {
63  text-align: center;
64}
65.portailcognac .text-right {
66  text-align: right;
67}
68.portailcognac .text-left {
69  text-align: left;
70}
71.portailcognac .menu {
72  margin: 0;
73  list-style-type: none;
74}
75.portailcognac .menu > li {
76  display: table-cell;
77  vertical-align: middle;
78}
79.portailcognac .vertical > li {
80  display: block;
81  vertical-align: middle;
82}
83.portailcognac .flexbox-flex {
84  display: flex;
85  align-items: baseline;
86  margin-bottom: .5em;
87}
88.portailcognac .flexbox-center-center {
89  display: flex;
90  align-items: center;
91  justify-content: center;
92  flex-wrap: wrap;
93}
94.portailcognac .flexbox-center-top {
95  display: flex;
96  align-items: stretch;
97  justify-content: center;
98  flex-wrap: wrap;
99}
100.portailcognac .flexbox--center {
101  display: flex;
102  align-items: center;
103}
104.portailcognac .flexbox-flex-row-reverse {
105  display: flex;
106  flex-direction: row-reverse;
107}
108.portailcognac .flex-nowrap {
109  flex-wrap: nowrap;
110}
111.portailcognac .flexbox-wrap-space-between {
112  display: flex;
113  flex-wrap: wrap;
114  align-content: space-between;
115}
116.portailcognac .flexbox-wrap-space-around {
117  display: flex;
118  flex-wrap: wrap;
119  justify-content: space-around;
120}
121.portailcognac .flexbox-center-space-between {
122  display: flex;
123  align-items: center;
124  justify-content: space-between;
125}
126.portailcognac .flexbox-start-space-between {
127  display: flex;
128  align-items: flex-start;
129  justify-content: space-between;
130}
131@media screen and (max-width: 47.9375em) {
132  .portailcognac .flex-nowrap {
133    flex-wrap: wrap;
134  }
135}
136.portailcognac .flexbox-stretch {
137  display: flex;
138  align-items: stretch;
139}
140@media screen and (max-width: 40em) {
141  .portailcognac .flexbox-stretch {
142    display: block;
143  }
144}
145.portailcognac .hide {
146  display: none;
147}
148.portailcognac .sans-border {
149  border: 0;
150}
151.portailcognac .avec-border {
152  border: 1px solid #aaa;
153}
154.portailcognac .avec-border-top {
155  border-top: 1px solid #aaa;
156}
157.portailcognac .avec-border-bottom {
158  border-bottom: 1px solid #aaa;
159}
160.portailcognac .avec-border-left {
161  border-left: 1px solid #aaa;
162}
163.portailcognac .sans-margin {
164  margin: 0;
165}
166.portailcognac .avec-margin {
167  margin: 1.5em;
168}
169.portailcognac .avec-margin-top {
170  margin-top: 1.5em;
171}
172.portailcognac .avec-margin-right {
173  margin-right: 1.5em;
174}
175.portailcognac .avec-margin-bottom {
176  margin-bottom: 1.5em;
177}
178.portailcognac .avec-margin-bottom05 {
179  margin-bottom: .5em;
180}
181.portailcognac .avec-margin-bottom015 {
182  margin-bottom: .15em;
183}
184.portailcognac .avec-margin-left {
185  margin-left: 1.5em;
186}
187@media screen and (min-width: 40em) {
188  .portailcognac .avec-margin-bottom-for-medium {
189    margin-bottom: 1.5em;
190  }
191}
192.portailcognac .sans-padding {
193  padding: 0;
194}
195@media screen and (max-width: 40em) {
196  .portailcognac .sans-padding-for-small {
197    padding: 0;
198  }
199}
200.portailcognac .avec-padding {
201  padding: 1em;
202}
203.portailcognac .avec-padding05 {
204  padding: .5em;
205}
206.portailcognac .avec-padding-top {
207  padding-top: 1em;
208}
209.portailcognac .avec-padding-top05 {
210  padding-top: .5em;
211}
212.portailcognac .avec-padding-top15 {
213  padding-top: 1.5em;
214}
215.portailcognac .avec-padding-right {
216  padding-right: 1em;
217}
218.portailcognac .avec-padding-right05 {
219  padding-right: .5em;
220}
221.portailcognac .avec-padding-bottom {
222  padding-bottom: 1em;
223}
224.portailcognac .avec-padding-left {
225  padding-left: 1em;
226}
227.portailcognac .avec-padding-leftright {
228  display: block;
229  padding-right: 1em;
230  padding-left: 1em;
231}
232.portailcognac .display-block {
233  display: block;
234}
235.portailcognac .text-transform-none {
236  text-transform: none;
237}
238.portailcognac .text-uppercase {
239  text-transform: uppercase;
240}
241.portailcognac .font-style-italic {
242  font-style: italic;
243}
244.portailcognac .position-relative {
245  position: relative;
246}
247.portailcognac .float-left {
248  float: left ;
249}
250.portailcognac .float-right {
251  float: right ;
252}
253.portailcognac .float-center {
254  display: table;
255  margin-right: auto ;
256  margin-left: auto ;
257}
258.portailcognac .z-index-999 {
259  z-index: 999;
260}
261.portailcognac .cursor-pointer {
262  cursor: pointer;
263}
264.portailcognac .slick-slider {
265  margin-bottom: 4em;
266}
267
268.portailcognac #liens-diaporama {
269  position: absolute;
270  top: 100px;
271  right: 0;
272}
273@media only screen and (max-width:[(#GET{LargeurContaineur})]px) {
274  .portailcognac #liens-diaporama {
275    top: 5vw;
276  }
277}
278@media only screen and (max-width: 767px) {
279  .portailcognac #liens-diaporama {
280    position: relative;
281    top: 50px;
282  }
283}
284.portailcognac #liens-diaporama ul {
285  width: 220px;
286  text-align: right;
287}
288@media only screen and (max-width: 767px) {
289  .portailcognac #liens-diaporama ul {
290    display: flex;
291    width: 100%;
292    flex-wrap: wrap;
293  }
294}
295.portailcognac #liens-diaporama li {
296  background-color: rgba(255, 255, 255, 0.75);
297  margin-bottom: .5em;
298}
299@media only screen and (max-width: 767px) {
300  .portailcognac #liens-diaporama li {
301    flex-grow: 1;
302  }
303}
304.portailcognac #liens-diaporama li a {
305  display: flex;
306  font-size: 1.2em;
307  color: #GET{c_menu_a};
308  justify-content: flex-end;
309  line-height: 1 ;
310  align-items: center;
311}
312.portailcognac #liens-diaporama li a span {
313  padding: .5em .25em .5em .5em;
314}
315@media only screen and (max-width: 767px) {
316  .portailcognac #liens-diaporama li a span {
317    padding: .25em .5em;
318  }
319}
320.portailcognac #liens-diaporama li a span.icon {
321  margin-left: .25em;
322  padding-left: .25em;
323  font-size: 1.8em;
324  border-left: 1px solid;
325  border-left-color: inherit;
326}
327@media only screen and (max-width: 767px) {
328  .portailcognac #liens-diaporama li a {
329    background-color: #eae9e5;
330    margin-left: .5em;
331  }
332}
333
334.portailcognac .slick-slide img {
335  margin: 0 auto;
336}
337.portailcognac .slick-slide .row {
338  max-width: none;
339}
340.portailcognac .slick-dots {
341  bottom: -45px;
342}
343.portailcognac .slick-dots li {
344  width: 30px;
345  height: 30px;
346}
347.portailcognac .slick-dots li button {
348  width: 30px;
349  height: 30px;
350}
351.portailcognac .slick-dots li button::before {
352  font-size: 20px;
353  line-height: 30px;
354  width: 30px;
355  height: 30px;
356}
357.portailcognac .slick-dots li.slick-active button::before {
358  color: black;
359}
360.portailcognac #content img {
361  padding: 0;
362}
363.portailcognac .slider-pratique {
364  margin: 0 4rem;
365}
366.portailcognac .slider-pratique .slick-prev,
367.portailcognac .slider-pratique .slick-next {
368  width: 40px;
369  height: 40px;
370}
371.portailcognac .slider-pratique .slick-prev {
372  left: -40px;
373}
374.portailcognac .slider-pratique .slick-next {
375  right: -40px;
376}
377.portailcognac .slider-pratique .slick-prev:before,
378.portailcognac .slider-pratique .slick-next:before {
379  font-size: 40px;
380  color: #777;
381  opacity: 1;
382}
383.portailcognac .slider-pratique .slick-prev:hover:before,
384.portailcognac .slider-pratique .slick-prev:focus:before,
385.portailcognac .slider-pratique .slick-next:hover:before,
386.portailcognac .slider-pratique .slick-next:focus:before {
387  opacity: 1;
388  color: #333 ;
389}
390.portailcognac .slider-pratique button:hover,
391.portailcognac .slider-pratique button:focus {
392  background-color: transparent;
393}
394.portailcognac .slider-pratique .content-pratique {
395  background-color: #aaa;
396  width: 280px;
397  margin: 0 12px;
398  -webkit-transition: all .25s ease;
399  transition: all .25s ease;
400}
401.portailcognac .slider-pratique .content-pratique:hover,
402.portailcognac .slider-pratique .content-pratique:focus {
403  -webkit-transition: all .25s ease;
404  transition: all .25s ease;
405}
406.portailcognac .slider-pratique .h2 {
407  display: flex;
408  height: 150px;
409  color: white;
410  text-align: right;
411        padding-bottom: 90px;
412    font-size: 2em;
413    font-weight: 300;
414    text-align: right;
415    margin: 1.5em 0px 0px;
416}
417.portailcognac .slider-pratique .h2 .titre-pratique {
418  width: 100%;
419  align-self: center;
420  text-align: right;
421  padding: 10px;
422    border-right: 1px solid;
423}
424.portailcognac .slider-pratique .h2 .icon {
425  align-self: center;
426  padding: 7px 15px 7px 7px;
427  font-size: 30px;
428}
429@media only screen and (max-width: 400px) {
430  .portailcognac .slider-pratique {
431    margin: 0 2.8rem;
432  }
433  .portailcognac .slider-pratique .content-pratique {
434    width: 240px;
435  }
436  .portailcognac .slider-pratique .h2 {
437    height: 130px;
438  }
439}
440.portailcognac .clearfix:after,
441.portailcognac .grid:after {
442  content: '';
443  display: block;
444  clear: both;
445}
446.portailcognac #masonry {
447  max-width: 1200px;
448  margin: 0 auto;
449  padding-left: 20px;
450  text-align: center;
451}
452.portailcognac .grid {
453  text-align: center;
454}
455.portailcognac .grid-item {
456  background-color: #ccc;
457  width: calc(25% - 20px);
458  height: calc(340px + 65px);
459}
460.portailcognac .grid-item:hover,
461.portailcognac .grid-item:focus {
462  background-color: #eee;
463}
464.portailcognac .grid-item .content-actus:nth-child(2) {
465  margin-top: 20px;
466  border-top: 20px solid white;
467}
468.portailcognac .grid-item header {
469  font-size: 1.5em;
470  overflow: auto;
471}
472.portailcognac .grid-item header strong {
473  font-size: inherit;
474}
475.portailcognac .grid-item header time {
476  padding: .75em .5em;
477}
478.portailcognac .grid-item header img {
479  max-width: 65%;
480}
481.portailcognac .grid-item .h2 {
482  display: flex;
483  flex-direction: row;
484  width: 100%;
485  height: 95px;
486  margin: 0;
487  font-weight: 400;
488  padding: 10px;
489  text-align: right;
490  border: none;
491}
492.portailcognac .grid-item .h2 .icon {
493    align-self: center;
494        padding: 7px 0 7px 7px;
495    font-size: 30px;
496}
497.portailcognac .grid-item .h2 .titre-actus {
498    width: 100%;
499    align-self: center;
500    padding: 10px 10px 10px 0;
501    border-right: 1px solid;
502}
503.portailcognac .grid-item img {
504  max-width: 100%;
505}
506.portailcognac .grid-item-x2 {
507  width: calc(50% - 20px);
508}
509.portailcognac .grid-item-x3 {
510  width: calc(75% - 20px);
511}
512.portailcognac .grid-item {
513  margin-bottom: 20px;
514}
515@media only screen and (max-width: 1200px) {
516  .portailcognac .grid-item {
517    height: calc(26vw + 90px);
518  }
519}
520@media only screen and (max-width:[(#GET{LargeurContaineur})]px) {
521  .portailcognac .grid-item {
522    width: calc(33.333% - 20px);
523    height: calc(34.5vw + 90px);
524  }
525  .portailcognac .grid-item-x2 {
526    width: calc(66.666% - 20px);
527  }
528  .portailcognac .grid-item-x3 {
529    width: calc(100% - 20px);
530  }
531}
532@media only screen and (max-width: 680px) {
533  .portailcognac .grid-item {
534    width: calc(50% - 20px);
535    height: auto;
536  }
537  .portailcognac .grid-item-x2 {
538    width: calc(100% - 20px);
539  }
540}
541@media only screen and (max-width: 540px) {
542  .portailcognac .grid-item {
543    width: calc(100% - 20px);
544  }
545}
546.portailcognac #lesprojets {
547  margin-top: 5em;
548  margin-bottom: 4em;
549}
550.portailcognac #projets {
551  margin: 0;
552  padding: 0;
553}
554.portailcognac #projets .projet {
555  background-color: #777;
556  width: 50%;
557  float: left;
558}
559.portailcognac #projets .projet:hover {
560  background-color: #aaa;
561}
562.portailcognac #projets a {
563    display: flex;
564    flex-direction: row;
565    align-content: center;
566    height: 10vw;
567    color: rgb(255, 255, 255);
568    border-width: initial;
569    border-style: none;
570    border-color: initial;
571    border-image: initial;
572}
573.portailcognac #projets a:hover {
574  color: #333;
575}
576.portailcognac #projets h2 {
577  width: 100%;
578  height: auto;
579  margin: auto;
580  padding: 0 10px;
581  color: inherit;
582  text-align: center;
583  border: none;
584}
585.portailcognac #projets h2 {
586    font-size: 2vw;
587    line-height: 35px;
588    width: 100%;
589    height: auto;
590    align-self: center;
591    color: inherit;
592    font-weight: 300;
593    text-align: center;
594    margin: auto;
595    padding: 0px 10px;
596}
597
598.portailcognac#sommaire_mode_portailcognac #projets .suite {
599    background-color: rgba(100, 100, 100, 0.498039);
600    display: flex;
601    height: auto;
602    padding: 0px 25px;
603}
604.portailcognac #projets .suite .icon {
605  margin: auto;
606  align-self: center;
607  font-size: 3vw;
608}
609@media only screen and (max-width:[(#GET{LargeurContaineur})]px) {
610  .portailcognac #projets h2 {
611    font-size: 36px;
612    line-height: 38px;
613  }
614}
615@media only screen and (max-width: 768px) {
616  .portailcognac #projets h2 {
617    font-size: 30px;
618    line-height: 34px;
619  }
620}
621@media only screen and (max-width: 640px) {
622  .portailcognac #projets article {
623    width: 100%;
624    float: none;
625  }
626  .portailcognac #projets article a {
627    height: auto;
628  }
629  .portailcognac #projets h2 {
630    padding: 1rem;
631    font-size: 26px;
632    line-height: 30px;
633  }
634  .portailcognac #projets .suite .icon {
635    font-size: 25px;
636  }
637}
638
639.portailcognac #pratique {
640  margin-bottom: 4em;
641}
642
643
644
645
646[(#CHEMIN{images/stylesportailcognac_perso.css}|?{'/* Surcharge eventuelle */'})
647[(#INCLURE{#CHEMIN{images/stylesportailcognac_perso.css}|url_absolue_css}|compacte{css})]
648]
Note: See TracBrowser for help on using the repository browser.