Template:Timeline/styles.css
From wikilawschool.net. Wiki Law School does not provide legal advice. For educational purposes only.
.main-timeline-section{
position: relative;
width: 100%;
margin:auto;
height:300px;
overflow-x:scroll;
overflow-y:visible;
display: flex;
justify-content: space-between;
}
.main-timeline-section .timeline-start,
.main-timeline-section .timeline-end{
position: absolute;
background: #c8ccd1;
border: 3px solid #FFF;
border-radius:100px;
top:50%;
transform: translateY(-50%);
width:30px;
height:30px;
z-index: 10;
}
.main-timeline-section .timeline-end{
right:0px;
}
.main-timeline-section .conference-center-line{
position: absolute;
width:100%;
height:5px;
top:50%;
transform: translateY(-50%);
background: #c8ccd1;
}
.timeline-article{
position: relative;
min-height: 300px;
float:left;
}
.timeline-article .content-date {
position: absolute;
top: 50%;
left: -30px;
font-size:18px;
transform: translateY(-50%);
}
.timeline-article .meta-date {
position: relative;
top: 50%;
left: 50%;
transform: translateY(-50%);
width:20px;
height:20px;
border-radius: 100%;
background: #c8ccd1;
border:3px solid #FFF;
}
.timeline-article .content-box {
/* box-shadow: 2px 2px 4px 0px #888; */
border: 3px solid #c8ccd1;
border-radius: 5px;
background-color: #FFF;
width: 180px;
position: absolute;
top: 60%;
left: -80px;
padding:10px;
color: #1F1F1F;
text-align: center;
}
.timeline-article-bottom .content-box:before {
content: " ";
position: absolute;
left:50%;
transform: translateX(-50%);
top:-20px;
border:10px solid transparent;
border-bottom-color: #c8ccd1;
}
.timeline-article-top .content-date {
top: 59%;
}
.timeline-article-top .content-box {
top: 25%;
}
.timeline-article-top .content-box:before {
content: " ";
position: absolute;
left:50%;
transform: translateX(-50%);
bottom:-20px;
border:10px solid transparent;
border-top-color: #c8ccd1;
}