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: | ||
.main-timeline-section{ | /* YourTimelineTemplate CSS */ | ||
position: relative; | |||
width: 100%; | .main-timeline-section { | ||
margin:auto; | position: relative; | ||
height:300px; | width: 100%; | ||
overflow-x: | margin: auto; | ||
height: 300px; | |||
overflow-x: auto; /* Add this line for horizontal scrolling */ | |||
white-space: nowrap; /* Prevent line breaks */ | |||
} | } | ||
.main-timeline-section .timeline-start, | .main-timeline-section .timeline-start, | ||
.main-timeline-section .timeline-end{ | .main-timeline-section .timeline-end { | ||
position: absolute; | position: absolute; | ||
background: #c8ccd1; | background: #c8ccd1; | ||
border: 3px solid #FFF; | border: 3px solid #FFF; | ||
border-radius:100px; | border-radius: 100px; | ||
top:50%; | top: 50%; | ||
transform: translateY(-50%); | transform: translateY(-50%); | ||
width:30px; | width: 30px; | ||
height:30px; | height: 30px; | ||
z-index: 10; | z-index: 10; | ||
} | } | ||
.main-timeline-section .timeline-end{ | |||
right:0px; | .main-timeline-section .timeline-end { | ||
right: 0px; | |||
} | } | ||
.main-timeline-section .conference-center-line{ | |||
.main-timeline-section .conference-center-line { | |||
position: absolute; | position: absolute; | ||
width:100%; | width: 100%; | ||
height:5px; | height: 5px; | ||
top:50%; | top: 50%; | ||
transform: translateY(-50%); | transform: translateY(-50%); | ||
background: #c8ccd1; | background: #c8ccd1; | ||
} | } | ||
.timeline-article{ | |||
.timeline-article { | |||
width: 20%; | |||
position: relative; | |||
min-height: 300px; | |||
display: inline-block; /* Display articles in a row */ | |||
} | } | ||
.timeline-article .content-date { | .timeline-article .content-date { | ||
position: absolute; | |||
top: 35%; | |||
left: -30px; | |||
font-size: 18px; | |||
} | } | ||
.timeline-article .meta-date { | .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 { | .timeline-article .content-box { | ||
border: 3px solid #c8ccd1; | border: 3px solid #c8ccd1; | ||
border-radius: 5px; | border-radius: 5px; | ||
Line 63: | Line 69: | ||
position: absolute; | position: absolute; | ||
top: 60%; | top: 60%; | ||
left: -80px; | left: -80px; | ||
padding:10px; | padding: 10px; | ||
color: #1F1F1F; | color: #1F1F1F; | ||
text-align: center; | text-align: center; | ||
} | } | ||
.timeline-article- | |||
.timeline-article-top .content-box:before { | |||
content: " "; | content: " "; | ||
position: absolute; | position: absolute; | ||
left:50%; | left: 50%; | ||
transform: translateX(-50%); | transform: translateX(-50%); | ||
top:-20px; | top: -20px; | ||
border:10px solid transparent; | border: 10px solid transparent; | ||
border-bottom-color: #c8ccd1; | border-bottom-color: #c8ccd1; | ||
} | } | ||
.timeline-article- | .timeline-article-bottom .content-date { | ||
top: 59%; | top: 59%; | ||
} | } | ||
.timeline-article- | |||
.timeline-article-bottom .content-box { | |||
top: 25%; | top: 25%; | ||
} | } | ||
.timeline-article- | |||
.timeline-article-bottom .content-box:before { | |||
content: " "; | content: " "; | ||
position: absolute; | position: absolute; | ||
left:50%; | left: 50%; | ||
transform: translateX(-50%); | transform: translateX(-50%); | ||
bottom:-20px; | bottom: -20px; | ||
border:10px solid transparent; | border: 10px solid transparent; | ||
border-top-color: #c8ccd1; | border-top-color: #c8ccd1; | ||
} | } |
Revision as of 23:19, December 14, 2023
/* YourTimelineTemplate CSS */
.main-timeline-section {
position: relative;
width: 100%;
margin: auto;
height: 300px;
overflow-x: auto; /* Add this line for horizontal scrolling */
white-space: nowrap; /* Prevent line breaks */
}
.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;
display: inline-block; /* Display articles in a row */
}
.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 {
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;
}