Template:UNITN-Trento/CSStimeline
.cd-container {
position: relative; padding: 2em 0; margin-top: 2em; margin-bottom: 2em; width: 90%; max-width: 1170px; margin: 0 auto; display:none;
} .cd-container::before {
/* this is the vertical line */ content: ; position: absolute; top: 0; left: 18px; height: 100%; width: 4px;
} .cd-container::after {
/* clearfix */ content: ; display: table; clear: both;
} @media only screen and (min-width: 1170px) { .cd-container {
margin-top: 3em; margin-bottom: 3em; } .cd-container::before { left: 50%; margin-left: -2px; }
}
.cd-timeline-block {
position: relative; margin: 2em 0;
} .cd-timeline-block:after {
content: ""; display: table; clear: both;
} .cd-timeline-block:first-child {
margin-top: 0;
} .cd-timeline-block:last-child {
margin-bottom: 0;
} @media only screen and (min-width: 1170px) {
.cd-timeline-block { margin: 4em 0; } .cd-timeline-block:first-child { margin-top: 0; } .cd-timeline-block:last-child { margin-bottom: 0; }
}
.cd-timeline-img {
position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%; background-size:cover;
}
.cd-timeline-img.Alessandro{background-image:url('https://static.igem.org/mediawiki/2015/b/b3/Unitn_pics_icon80_alessandro.jpg');} .cd-timeline-img.Riccardo{background-image:url('https://static.igem.org/mediawiki/2015/2/2e/Unitn_pics_icon80_riccardo.jpg');} .cd-timeline-img.Elisa-Claudio{background-image:url('https://static.igem.org/mediawiki/2015/5/53/Unitn_pics_icon80_claudio.jpg');} .cd-timeline-img.Claudio{background-image:url('https://static.igem.org/mediawiki/2015/5/53/Unitn_pics_icon80_claudio.jpg');} .cd-timeline-img.Veronica{background-image:url('https://static.igem.org/mediawiki/2015/4/47/Unitn_pics_icon80_veronica.jpg');} .cd-timeline-img.Silvia{background-image:url('https://static.igem.org/mediawiki/2015/1/1f/Unitn_pics_icon80_silvia.jpg');} .cd-timeline-img.Elisa{background-image:url('https://static.igem.org/mediawiki/2015/9/99/Unitn_pics_icon80_elisa.jpg');}
- cd-timeline_PR .cd-timeline-img{box-shadow: 0 0 0 4px rgba(255,0,60,0.5), inset 0 2px 0 rgba(0, 0, 0, 0.5), 0 3px 0 3px rgba(0, 0, 0, 0.3);}
- cd-timeline_BLH .cd-timeline-img{box-shadow: 0 0 0 4px rgba(255,138,0,0.5), inset 0 2px 0 rgba(0, 0, 0, 0.5), 0 3px 0 3px rgba(0, 0, 0, 0.3);}
- cd-timeline_PNCB .cd-timeline-img{box-shadow: 0 0 0 4px rgba(250,190,40,0.5), inset 0 2px 0 rgba(0, 0, 0, 0.5), 0 3px 0 3px rgba(0, 0, 0, 0.3);}
- cd-timeline_CYT .cd-timeline-img{box-shadow: 0 0 0 4px rgba(136,193,0,0.5), inset 0 2px 0 rgba(0, 0, 0, 0.5), 0 3px 0 3px rgba(0, 0, 0, 0.3);}
- cd-timeline_MFC .cd-timeline-img{box-shadow: 0 0 0 4px rgba(0,193,118,0.5), inset 0 2px 0 rgba(0, 0, 0, 0.5), 0 3px 0 3px rgba(0, 0, 0, 0.3);}
- cd-timeline_INTERLAB .cd-timeline-img{box-shadow: 0 0 0 4px rgba(115,51,180,0.5), inset 0 2px 0 rgba(0, 0, 0, 0.5), 0 3px 0 3px rgba(0, 0, 0, 0.3);}
- cd-timeline_PR .cd-timeline-content{box-shadow: 0 3px 0 rgba(255,0,60,0.5);}
- cd-timeline_BLH .cd-timeline-content{box-shadow: 0 3px 0 rgba(255,138,0,0.5)}
- cd-timeline_PNCB .cd-timeline-content{box-shadow: 0 3px 0 rgba(250,190,40,0.5)}
- cd-timeline_CYT .cd-timeline-content{box-shadow: 0 3px 0 rgba(136,193,0,0.5)}
- cd-timeline_MFC .cd-timeline-content{box-shadow: 0 3px 0 rgba(0,193,118,0.5)}
- cd-timeline_INTERLAB .cd-timeline-content{box-shadow:0 3px 0 rgba(115,51,180,0.5)}
- cd-timeline_PR::before {background: rgba(255,0,60,1);}
- cd-timeline_BLH::before{background: rgba(255,138,0,1);}
- cd-timeline_PNCB::before{background: rgba(250,190,40,1);}
- cd-timeline_CYT::before{background: rgba(136,193,0,1);}
- cd-timeline_MFC::before{background: rgba(0,193,118,1);}
- cd-timeline_INTERLAB::before{background: rgba(115,51,180,1);}
- cd-timeline_PR .cd-timeline-content h2 {color: rgb(255,0,60) !important; border-bottom:1px solid rgb(255,0,60);}
- cd-timeline_BLH .cd-timeline-content h2{color: rgb(255,138,0) !important; border-bottom:1px solid rgb(255,138,0);}
- cd-timeline_PNCB .cd-timeline-content h2{color: rgb(250,190,40) !important; border-bottom:1px solid rgb(250,190,40);}
- cd-timeline_CYT .cd-timeline-content h2{color: rgb(136,193,0) !important; border-bottom:1px solid rgb(136,193,0);}
- cd-timeline_MFC .cd-timeline-content h2{color: rgb(0,193,118) !important; border-bottom:1px solid rgb(0,193,118);}
- cd-timeline_INTERLAB .cd-timeline-content h2{color: rgb(115,51,180) !important; border-bottom:1px solid rgb(115,51,180);}
@media only screen and (min-width: 1170px) {
.cd-timeline-img { width: 60px; height: 60px; left: 50%; margin-left: -30px; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; } .cssanimations .cd-timeline-img.is-hidden { visibility: hidden; } .cssanimations .cd-timeline-img.bounce-in { visibility: visible; -webkit-animation: cd-bounce-1 0.6s; -moz-animation: cd-bounce-1 0.6s; animation: cd-bounce-1 0.6s; }
}
@-webkit-keyframes cd-bounce-1 {
0% { opacity: 0; -webkit-transform: scale(0.5); }
60% { opacity: 1; -webkit-transform: scale(1.2); }
100% { -webkit-transform: scale(1); }
} @-moz-keyframes cd-bounce-1 {
0% { opacity: 0; -moz-transform: scale(0.5); }
60% { opacity: 1; -moz-transform: scale(1.2); }
100% { -moz-transform: scale(1); }
} @keyframes cd-bounce-1 {
0% { opacity: 0; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); }
60% { opacity: 1; -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); }
100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
} .cd-timeline-content {
position: relative; margin-left: 60px; background: white; border-radius: 0.25em; padding: 1em;
} .cd-timeline-content:after {
content: ""; display: table; clear: both;
} .cd-timeline-content h2 {
font-weight:900 !important;
} .cd-timeline-content p, .cd-timeline-content .cd-date {
font-size: 13px; font-size: 0.8125rem;
} .cd-timeline-content .cd-date {
display: inline-block;
} .cd-timeline-content p {
margin: 1em 0; line-height: 1.6;
} .cd-timeline-content .cd-date {
float: left; padding: .8em 0; opacity: .7;
} .cd-timeline-content::before {
content: ; position: absolute; top: 16px; right: 100%; height: 0; width: 0; border: 7px solid transparent; border-right: 7px solid white;
} @media only screen and (min-width: 768px) {
.cd-timeline-content h2 { font-size: 20px !important; font-size: 1.25rem !important; } .cd-timeline-content p { font-size: 16px; font-size: 1rem; } .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date { font-size: 14px; font-size: 0.875rem; }
} @media only screen and (min-width: 1170px) {
.cd-timeline-content { margin-left: 0; padding: 1.6em; width: 45%; } .cd-timeline-content::before { top: 24px; left: 100%; border-color: transparent; border-left-color: white; } .cd-timeline-content .cd-read-more { float: left; } .cd-timeline-content .cd-date { position: absolute; width: 100%; left: 122%; top: 6px; font-size: 16px; font-size: 1rem; } .cd-timeline-block:nth-child(even) .cd-timeline-content { float: right; } .cd-timeline-block:nth-child(even) .cd-timeline-content::before { top: 24px; left: auto; right: 100%; border-color: transparent; border-right-color: white; } .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more { float: right; } .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date { left: auto; right: 122%; text-align: right; } .cssanimations .cd-timeline-content.is-hidden { visibility: hidden; } .cssanimations .cd-timeline-content.bounce-in { visibility: visible; -webkit-animation: cd-bounce-2 0.6s; -moz-animation: cd-bounce-2 0.6s; animation: cd-bounce-2 0.6s; }
}
@media only screen and (min-width: 1170px) {
/* inverse bounce effect on even content blocks */ .cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in { -webkit-animation: cd-bounce-2-inverse 0.6s; -moz-animation: cd-bounce-2-inverse 0.6s; animation: cd-bounce-2-inverse 0.6s; }
} @-webkit-keyframes cd-bounce-2 {
0% { opacity: 0; -webkit-transform: translateX(-100px); }
60% { opacity: 1; -webkit-transform: translateX(20px); }
100% { -webkit-transform: translateX(0); }
} @-moz-keyframes cd-bounce-2 {
0% { opacity: 0; -moz-transform: translateX(-100px); }
60% { opacity: 1; -moz-transform: translateX(20px); }
100% { -moz-transform: translateX(0); }
} @keyframes cd-bounce-2 {
0% { opacity: 0; -webkit-transform: translateX(-100px); -moz-transform: translateX(-100px); -ms-transform: translateX(-100px); -o-transform: translateX(-100px); transform: translateX(-100px); }
60% { opacity: 1; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); }
100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); }
} @-webkit-keyframes cd-bounce-2-inverse {
0% { opacity: 0; -webkit-transform: translateX(100px); }
60% { opacity: 1; -webkit-transform: translateX(-20px); }
100% { -webkit-transform: translateX(0); }
} @-moz-keyframes cd-bounce-2-inverse {
0% { opacity: 0; -moz-transform: translateX(100px); }
60% { opacity: 1; -moz-transform: translateX(-20px); }
100% { -moz-transform: translateX(0); }
} @keyframes cd-bounce-2-inverse {
0% { opacity: 0; -webkit-transform: translateX(100px); -moz-transform: translateX(100px); -ms-transform: translateX(100px); -o-transform: translateX(100px); transform: translateX(100px); }
60% { opacity: 1; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); }
100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); }
}