Template:Timeline/styles.css: Difference between revisions
From wikilawschool.net. Wiki Law School does not provide legal advice. For educational purposes only.
Lost Student (talk | contribs) mNo edit summary |
Lost Student (talk | contribs) mNo edit summary |
||
Line 1: | Line 1: | ||
.timeline-container{ | .timeline-container{ | ||
} | } | ||
.main-timeline-section{ | .main-timeline-section{ | ||
Line 8: | Line 7: | ||
margin:auto; | margin:auto; | ||
height:300px; | height:300px; | ||
overflow-x:scroll; | |||
overflow-y:visible; | |||
} | } | ||
.main-timeline-section .timeline-start, | .main-timeline-section .timeline-start, | ||
Line 36: | Line 37: | ||
position: relative; | position: relative; | ||
min-height: 300px; | min-height: 300px; | ||
float: | float:left; | ||
} | } | ||
.timeline-article .content-date { | .timeline-article .content-date { | ||
position: absolute; | position: absolute; | ||
top: | top: 30%; | ||
left: -30px; | left: -30px; | ||
font-size:18px; | font-size:18px; | ||
Line 48: | Line 49: | ||
top: 50%; | top: 50%; | ||
left: 0px; | left: 0px; | ||
transform: translateY(- | transform: translateY(-80%); | ||
width:20px; | width:20px; | ||
height:20px; | height:20px; | ||
Line 78: | Line 79: | ||
} | } | ||
.timeline-article-bottom .content-date { | .timeline-article-bottom .content-date { | ||
top: | top: 50%; | ||
} | } | ||
.timeline-article-bottom .content-box { | .timeline-article-bottom .content-box { |
Revision as of 04:27, December 14, 2023
.timeline-container{
}
.main-timeline-section{
position: relative;
width: 100%;
margin:auto;
height:300px;
overflow-x:scroll;
overflow-y:visible;
}
.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{
width: 20%;
position: relative;
min-height: 300px;
float:left;
}
.timeline-article .content-date {
position: absolute;
top: 30%;
left: -30px;
font-size:18px;
}
.timeline-article .meta-date {
position: absolute;
top: 50%;
left: 0px;
transform: translateY(-80%);
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-top .content-box:before {
content: " ";
position:absolute;
left:50%;
transform: translateX(-50%);
top:-20px;
border:10px solid transparent;
border-bottom-color: #c8ccd1;
}
.timeline-article-bottom .content-date {
top: 50%;
}
.timeline-article-bottom .content-box {
top: 25%;
}
.timeline-article-bottom .content-box:before {
content: " ";
position:absolute;
left:50%;
transform: translateX(-50%);
bottom:-20px;
border:10px solid transparent;
border-top-color: #c8ccd1;
}
@media (max-width:460px){
body{
display: none;
}
}