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) (Created page with ".main-timeline-section{ position: relative; width: 100%; margin:auto; height:300px; } .main-timeline-section .timeline-start, .main-timeline-section .timeline-end{ position: absolute; background: #00BFFF; 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: abso...") |
Lost Student (talk | contribs) mNo edit summary |
||
Line 1: | Line 1: | ||
.timeline-container{ | |||
overflow-x:scroll; | |||
overflow-y:visible; | |||
} | |||
.main-timeline-section{ | .main-timeline-section{ | ||
position: relative; | position: relative; | ||
Line 8: | Line 12: | ||
.main-timeline-section .timeline-end{ | .main-timeline-section .timeline-end{ | ||
position: absolute; | position: absolute; | ||
background: # | background: #c8ccd1; | ||
border: 3px solid #FFF; | border: 3px solid #FFF; | ||
border-radius:100px; | border-radius:100px; | ||
Line 26: | Line 30: | ||
top:50%; | top:50%; | ||
transform: translateY(-50%); | transform: translateY(-50%); | ||
background: # | background: #c8ccd1; | ||
} | } | ||
.timeline-article{ | .timeline-article{ | ||
Line 48: | Line 52: | ||
height:20px; | height:20px; | ||
border-radius: 100%; | border-radius: 100%; | ||
background: # | background: #c8ccd1; | ||
border:3px solid #FFF; | border:3px solid #FFF; | ||
} | } | ||
.timeline-article .content-box { | .timeline-article .content-box { | ||
/* box-shadow: 2px 2px 4px 0px #888; */ | /* box-shadow: 2px 2px 4px 0px #888; */ | ||
border: 3px solid # | border: 3px solid #c8ccd1; | ||
border-radius: 5px; | border-radius: 5px; | ||
background-color: #FFF; | background-color: #FFF; | ||
Line 71: | Line 75: | ||
top:-20px; | top:-20px; | ||
border:10px solid transparent; | border:10px solid transparent; | ||
border-bottom-color: # | border-bottom-color: #c8ccd1; | ||
} | } | ||
.timeline-article-bottom .content-date { | .timeline-article-bottom .content-date { | ||
Line 86: | Line 90: | ||
bottom:-20px; | bottom:-20px; | ||
border:10px solid transparent; | border:10px solid transparent; | ||
border-top-color: # | border-top-color: #c8ccd1; | ||
} | } | ||
Revision as of 03:42, December 14, 2023
.timeline-container{
overflow-x:scroll;
overflow-y:visible;
}
.main-timeline-section{
position: relative;
width: 100%;
margin:auto;
height:300px;
}
.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:right;
}
.timeline-article .content-date {
position: absolute;
top: 35%;
left: -30px;
font-size:18px;
}
.timeline-article .meta-date {
position: absolute;
top: 50%;
left: 0px;
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-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: 59%;
}
.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;
}
}