Changeset 123062 in spip-zone


Ignore:
Timestamp:
Mar 23, 2020, 9:06:59 PM (2 weeks ago)
Author:
real3t@…
Message:

[SoyezCréateurs?] Style de l'agenda cognac utilisable dans les pages intérieures

Location:
_squelettes_/soyezcreateurs_net/trunk/plugins/soyezcreateurs
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • _squelettes_/soyezcreateurs_net/trunk/plugins/soyezcreateurs/stylesportailcognac.css.html

    r118463 r123062  
    780780}
    781781
    782 
    783782#masonry {
    784783  max-width: #GET{LargeurContaineur}px;
     
    786785  padding-left: 20px;
    787786  text-align: center;
    788 }
    789 
    790 .agenda strong {
    791   font-size: 1.8em;
    792   vertical-align: bottom;
    793 }
    794 .agenda .annee {
    795   font-size: 1.8em;
    796 }
    797 .agenda time {
    798   padding: 0 .25em;
    799 }
    800 .agenda {height: 95px; }
    801 .grid-item .agenda .h2 {
    802   font-size: 1em;
    803   overflow-x: hidden;
    804 }
    805 .grid-item .agenda .date {
    806   padding: 0;
    807   flex-shrink: 0;
    808   display: flex;
    809   align-items: center;
    810   justify-content: center;
    811 }
    812 .agenda time {
    813     text-align: center;
    814 }
    815 .agenda .debutfin time {
    816     text-align: left;
    817 }
    818 .grid-item .agenda .date.debutfin {
    819   display: block;
    820   align-items: left;
    821   justify-content: left;
    822 }
    823 
    824 /* Affichage des dates. cf https://codepen.io/jpyrat/pen/EmZrpR */
    825 .date {
    826   width: 95px;
    827   height: 95px;
    828   position: relative;
    829   background: [(#GET{c_header_bk}|couleur_extreme|=={000000}|?{#GET{c_header_bk},#GET{c_header}})];
    830   color: [(#GET{c_header_bk}|couleur_extreme|=={000000}|?{#GET{c_header},#GET{c_header_bk}})];
    831 }
    832 
    833 .debutfin.horaires:after, .debutfin.journees:after {
    834   content: "";
    835   position: absolute;
    836   right: 0;
    837   top: 0;
    838   border-top: 2px solid #fff;
    839   width: 142%;
    840   transform: rotate(-45deg);
    841   transform-origin: 99% 0%;
    842 }
    843 
    844 .debut, .fin {
    845   width: 75%;
    846   height: 50%;
    847   position: absolute;
    848   text-align: left;
    849   display: flex;
    850   flex-direction: column;
    851   justify-content: center;
    852   color: #fff;
    853   line-height: 1.2em;
    854   font-size: 75%;
    855 }
    856 
    857 .debutfin.journee .debut {
    858   font-size: 100%;
    859   width: 100%;
    860   top: 20%;
    861   height: auto;
    862   text-align: center;
    863   line-height: 2em;
    864 }
    865 
    866 .agenda .debutfin time.fin {
    867   right: 0;
    868   top: 50%;
    869   text-align: right;
    870 }
    871 
    872 .ladate {
    873   margin:0;
    874   padding:0;
    875 }
    876 
    877 .annee {
    878   font-size: 1.2em;
    879   line-height: 0.82em;
    880   display: block;
    881787}
    882788
  • _squelettes_/soyezcreateurs_net/trunk/plugins/soyezcreateurs/stylessoyezcreateurs.css.html

    r119045 r123062  
    35463546</BOUCLE_CouleursRubriques>
    35473547
     3548.agenda strong {
     3549  font-size: 1.8em;
     3550  vertical-align: bottom;
     3551}
     3552.agenda .annee {
     3553  font-size: 1.8em;
     3554}
     3555.agenda time {
     3556  padding: 0 .25em;
     3557}
     3558.agenda {height: 95px; }
     3559.grid-item .agenda .h2 {
     3560  font-size: 1em;
     3561  overflow-x: hidden;
     3562}
     3563.grid-item .agenda .date {
     3564  padding: 0;
     3565  flex-shrink: 0;
     3566  display: flex;
     3567  align-items: center;
     3568  justify-content: center;
     3569}
     3570.agenda time {
     3571    text-align: center;
     3572}
     3573.agenda .debutfin time {
     3574    text-align: left;
     3575}
     3576.grid-item .agenda .date.debutfin {
     3577  display: block;
     3578  align-items: left;
     3579  justify-content: left;
     3580}
     3581
     3582/* Affichage des dates. cf https://codepen.io/jpyrat/pen/EmZrpR */
     3583.date {
     3584  width: 95px;
     3585  height: 95px;
     3586  position: relative;
     3587  background: [(#GET{c_header_bk}|couleur_extreme|=={000000}|?{#GET{c_header_bk},#GET{c_header}})];
     3588  color: [(#GET{c_header_bk}|couleur_extreme|=={000000}|?{#GET{c_header},#GET{c_header_bk}})];
     3589}
     3590
     3591.debutfin.horaires:after, .debutfin.journees:after {
     3592  content: "";
     3593  position: absolute;
     3594  right: 0;
     3595  top: 0;
     3596  border-top: 2px solid #fff;
     3597  width: 142%;
     3598  transform: rotate(-45deg);
     3599  transform-origin: 99% 0%;
     3600}
     3601
     3602.debut, .fin {
     3603  width: 75%;
     3604  height: 50%;
     3605  position: absolute;
     3606  text-align: left;
     3607  display: flex;
     3608  flex-direction: column;
     3609  justify-content: center;
     3610  color: #fff;
     3611  line-height: 1.2em;
     3612  font-size: 75%;
     3613}
     3614
     3615.debutfin.journee .debut {
     3616  font-size: 100%;
     3617  width: 100%;
     3618  top: 20%;
     3619  height: auto;
     3620  text-align: center;
     3621  line-height: 2em;
     3622}
     3623
     3624.agenda .debutfin time.fin {
     3625  right: 0;
     3626  top: 50%;
     3627  text-align: right;
     3628}
     3629
     3630.ladate {
     3631  margin:0;
     3632  padding:0;
     3633}
     3634
     3635.annee {
     3636  font-size: 1.2em;
     3637  line-height: 0.82em;
     3638  display: block;
     3639}
     3640
    35483641.grid-item .year { background-color: #GET{c_menuhaut_bk}; color: #GET{c_menuhaut}; }
    35493642.grid-item .year .h2 .titre-actus { border: none; font-weight: bold; font-size: 2em; }
Note: See TracChangeset for help on using the changeset viewer.