Moving truck icon.png 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.
No edit summary
No edit summary
 
(4 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* YourTimelineTemplate CSS */
.timeline {
 
.main-timeline-section {
  position: relative;
   width: 100%;
   width: 100%;
   margin: auto;
   height: 412px;
   height: 300px;
   padding: 20px;
   overflow-x: auto; /* Add this line for horizontal scrolling */
   position:relative;
   white-space: nowrap; /* Prevent line breaks */
   box-sizing: border-box;
}
 
.main-timeline-section .timeline-start,
.main-timeline-section .timeline-end {
  position: absolute;
   background: #c8ccd1;
   background: #c8ccd1;
   border: 3px solid #FFF;
   overflow: auto;
   border-radius: 100px;
   display: flex;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  z-index: 10;
}
 
.main-timeline-section .timeline-end {
  right: 0px;
}
}
 
.timieline-title {
.main-timeline-section .conference-center-line {
   font-size: 1.5em;
   position: absolute;
   font-weight: bold;  
  width: 100%;
   height: 5px;
  top: 50%;
  transform: translateY(-50%);
  background: #c8ccd1;
}
}
 
.timeline-content {
.timeline-article {
   max-width: 300px;
   width: 20%;
  height: 125px;
  padding: 20px;
  flex-shrink: 0;
  flex-grow: 0;
  align-self: flex-start;
  background: #FFF;
   position: relative;
   position: relative;
   min-height: 300px;
   border-radius: 10px;
   display: inline-block; /* Display articles in a row */
   margin-right: 10px;
  box-shadow: 0px 0px 2px 2px rgba(0,0,0, 0.2);
}
}
 
.timeline-content:before {
.timeline-article .content-date {
   position: absolute;
   position: absolute;
   top: 35%;
  width: calc(100% + 14px);
   left: -30px;
  height: 4px;
   font-size: 18px;
   top: calc(100% + 10px);
  background: #FFF;
  content: "";
   left: -7px;
   border-radius: 5px;
}
}


.timeline-article .meta-date {
.timeline-content:after {
   position: absolute;
   position: absolute;
   top: 50%;
   width: 4px;
   left: 0px;
   height: 25px;
   transform: translateY(-50%);
   top: 100%;
   width: 20px;
   left: calc(50% - 10px);
  height: 20px;
   background: #FFF;
  border-radius: 100%;
   content: "";
   background: #c8ccd1;
   border: 3px solid #FFF;
}
}
 
.timeline-period {
.timeline-article .content-box {
  border: 3px solid #c8ccd1;
  border-radius: 5px;
  background-color: #FFF;
  width: 180px;
   position: absolute;
   position: absolute;
   top: 60%;
   top: calc(100% + 25px);
   left: -80px;
   background: #FFF;
   padding: 10px;
   padding: 10px;
   color: #1F1F1F;
   width: 100px;
   text-align: center;
   text-align:center;
  border-radius: 10px;
  left: calc(50% - 70px);
  box-shadow: 0px 0px 2px 2px rgba(0,0,0, 0.2);
}
}
 
.timeline-period:before {
.timeline-article-top .content-box:before {
  width: 15px;
   content: " ";
  height: 15px;
  background: #FFF;
  border-radius: 50%;
   content: "";
   position: absolute;
   position: absolute;
  left: 50%;
  transform: translateX(-50%);
   top: -20px;
   top: -20px;
   border: 10px solid transparent;
   left: calc(50% - 5.5px);
   border-bottom-color: #c8ccd1;
   z-index: 2;
}
}


.timeline-article-bottom .content-date {
.timeline-content:nth-child(even) {
   top: 59%;
   align-self: flex-end;
}
}
 
.timeline-content:nth-child(even):before {
.timeline-article-bottom .content-box {
    top: -15px;
   top: 25%;
}
.timeline-content:nth-child(even):after {
    top: -25px;
}
.timeline-content:nth-child(even) .timeline-period {
   bottom: 115.25%;
  top: unset;
}
}
 
.timeline-content:nth-child(even) .timeline-period:before {
.timeline-article-bottom .content-box:before {
   top: calc(100% + 5px);
   content: " ";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -20px;
  border: 10px solid transparent;
  border-top-color: #c8ccd1;
}
}

Latest revision as of 02:07, December 16, 2023

.timeline {
  width: 100%;
  height: 412px;
  padding: 20px;
  position:relative;
  box-sizing: border-box;
  background: #c8ccd1;
  overflow: auto;
  display: flex;
}
.timieline-title {
  font-size: 1.5em;
  font-weight: bold; 
}
.timeline-content {
  max-width: 300px;
  height: 125px;
  padding: 20px;
  flex-shrink: 0;
  flex-grow: 0;
  align-self: flex-start;
  background: #FFF;
  position: relative;
  border-radius: 10px;
  margin-right: 10px;
  box-shadow: 0px 0px 2px 2px rgba(0,0,0, 0.2);
}
.timeline-content:before {
  position: absolute;
  width: calc(100% + 14px);
  height: 4px;
  top: calc(100% + 10px);
  background: #FFF;
  content: "";
  left: -7px;
  border-radius: 5px;
}

.timeline-content:after {
  position: absolute;
  width: 4px;
  height: 25px;
  top: 100%;
  left: calc(50% - 10px);
  background: #FFF;
  content: "";
}
.timeline-period {
  position: absolute;
  top: calc(100% + 25px);
  background: #FFF;
  padding: 10px;
  width: 100px;
  text-align:center;
  border-radius: 10px;
  left: calc(50% - 70px);
  box-shadow: 0px 0px 2px 2px rgba(0,0,0, 0.2);
}
.timeline-period:before {
  width: 15px;
  height: 15px;
  background: #FFF;
  border-radius: 50%;
  content: "";
  position: absolute;
  top: -20px;
  left: calc(50% - 5.5px);
  z-index: 2;
}

.timeline-content:nth-child(even) {
  align-self: flex-end;
}
.timeline-content:nth-child(even):before {
    top: -15px; 
}
.timeline-content:nth-child(even):after {
    top: -25px;
}
.timeline-content:nth-child(even) .timeline-period {
  bottom: 115.25%;
  top: unset;
}
.timeline-content:nth-child(even) .timeline-period:before {
  top: calc(100% + 5px);
}
Retrieved from "https://www.wikilawschool.net/w/index.php?title=Template:Timeline/styles.css&oldid=48712"