Wiki Law School will soon be moving! Please update your bookmarks. Our future address is www.wikilawschool.org |
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) No edit summary |
||
Line 1: | Line 1: | ||
.timeline- | .conference-timeline-content{ | ||
display: flex; | |||
justify-content: space-between; | |||
} | } | ||
.main-timeline-section{ | .main-timeline-section{ | ||
Line 40: | Line 41: | ||
} | } | ||
.timeline-article .content-date { | .timeline-article .content-date { | ||
top: 30%; | top: 30%; | ||
left: -30px; | left: -30px; | ||
Line 46: | Line 47: | ||
} | } | ||
.timeline-article .meta-date { | .timeline-article .meta-date { | ||
top: 50%; | top: 50%; | ||
left: 0px; | left: 0px; | ||
Line 62: | Line 63: | ||
background-color: #FFF; | background-color: #FFF; | ||
width: 180px; | width: 180px; | ||
top: 60%; | top: 60%; | ||
left: -80px; | left: -80px; | ||
Line 71: | Line 72: | ||
.timeline-article-top .content-box:before { | .timeline-article-top .content-box:before { | ||
content: " "; | content: " "; | ||
left:50%; | left:50%; | ||
transform: translateX(-50%); | transform: translateX(-50%); | ||
Line 86: | Line 87: | ||
.timeline-article-bottom .content-box:before { | .timeline-article-bottom .content-box:before { | ||
content: " "; | content: " "; | ||
left:50%; | left:50%; | ||
transform: translateX(-50%); | transform: translateX(-50%); |
Revision as of 04:46, December 14, 2023
.conference-timeline-content{
display: flex;
justify-content: space-between;
}
.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 {
top: 30%;
left: -30px;
font-size:18px;
}
.timeline-article .meta-date {
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;
top: 60%;
left: -80px;
padding:10px;
color: #1F1F1F;
text-align: center;
}
.timeline-article-top .content-box:before {
content: " ";
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: " ";
left:50%;
transform: translateX(-50%);
bottom:-20px;
border:10px solid transparent;
border-top-color: #c8ccd1;
}
@media (max-width:460px){
body{
display: none;
}
}