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) No edit summary |
Lost Student (talk | contribs) mNo edit summary |
||
Line 1: | Line 1: | ||
/* Timeline/styles.css */ | |||
.timeline-container { | .timeline-container { | ||
position: relative; | position: relative; | ||
Line 12: | Line 14: | ||
.main-timeline-section .timeline-end { | .main-timeline-section .timeline-end { | ||
position: absolute; | position: absolute; | ||
background: #c8ccd1; | background: #c8ccd1; /* Updated color */ | ||
border: 3px solid #FFF; | border: 3px solid #FFF; | ||
border-radius: 50%; | border-radius: 50%; | ||
Line 32: | Line 34: | ||
top: 50%; | top: 50%; | ||
transform: translateY(-50%); | transform: translateY(-50%); | ||
background: #c8ccd1; | background: #c8ccd1; /* Updated color */ | ||
} | } | ||
.timeline-article { | .timeline-article { | ||
width: | width: 50%; /* Adjusted width for better spacing */ | ||
position: relative; | position: relative; | ||
min-height: 300px; | min-height: 300px; | ||
Line 49: | Line 51: | ||
height: 20px; | height: 20px; | ||
border-radius: 50%; | border-radius: 50%; | ||
background: #c8ccd1; | background: #c8ccd1; /* Updated color */ | ||
border: 3px solid #FFF; | border: 3px solid #FFF; | ||
} | } | ||
.timeline-article .content-box { | .timeline-article .content-box { | ||
border: 3px solid #c8ccd1; | border: 3px solid #c8ccd1; /* Updated color */ | ||
border-radius: 5px; | border-radius: 5px; | ||
background-color: #FFF; | background-color: #FFF; | ||
width: 180px; | width: 180px; | ||
position: absolute; | position: absolute; | ||
top: | top: 50%; /* Adjusted top position for better alignment */ | ||
left: - | left: -90px; /* Adjusted left position for better spacing */ | ||
padding: 10px; | padding: 10px; | ||
color: #1F1F1F; | color: #1F1F1F; | ||
Line 68: | Line 70: | ||
.timeline-article-top .content-box:before, | .timeline-article-top .content-box:before, | ||
.timeline-article-bottom .content-box:before { | .timeline-article-bottom .content-box:before { | ||
border-bottom-color: #c8ccd1; | border-bottom-color: #c8ccd1; /* Updated color */ | ||
border-top-color: #c8ccd1; | border-top-color: #c8ccd1; /* Updated color */ | ||
} | } |
Revision as of 00:47, December 15, 2023
/* Timeline/styles.css */
.timeline-container {
position: relative;
}
.main-timeline-section {
position: relative;
width: 100%;
margin: auto;
}
.main-timeline-section .timeline-start,
.main-timeline-section .timeline-end {
position: absolute;
background: #c8ccd1; /* Updated color */
border: 3px solid #FFF;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
z-index: 10;
}
.main-timeline-section .timeline-end {
right: 0;
}
.main-timeline-section .conference-center-line {
position: absolute;
width: 100%;
height: 5px;
top: 50%;
transform: translateY(-50%);
background: #c8ccd1; /* Updated color */
}
.timeline-article {
width: 50%; /* Adjusted width for better spacing */
position: relative;
min-height: 300px;
}
.timeline-article .meta-date {
position: absolute;
top: 50%;
left: 0;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
border-radius: 50%;
background: #c8ccd1; /* Updated color */
border: 3px solid #FFF;
}
.timeline-article .content-box {
border: 3px solid #c8ccd1; /* Updated color */
border-radius: 5px;
background-color: #FFF;
width: 180px;
position: absolute;
top: 50%; /* Adjusted top position for better alignment */
left: -90px; /* Adjusted left position for better spacing */
padding: 10px;
color: #1F1F1F;
text-align: center;
}
.timeline-article-top .content-box:before,
.timeline-article-bottom .content-box:before {
border-bottom-color: #c8ccd1; /* Updated color */
border-top-color: #c8ccd1; /* Updated color */
}