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.
mNo edit summary
No edit summary
 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* Timeline/styles.css */
.timeline {
 
  width: 100%;
.timeline-container {
  height: 412px;
    position: relative;
  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;
}
}


.main-timeline-section {
.timeline-content:after {
    position: relative;
  position: absolute;
    width: 100%;
  width: 4px;
    margin: auto;
  height: 25px;
  top: 100%;
  left: calc(50% - 10px);
  background: #FFF;
  content: "";
}
}
 
.timeline-period {
.main-timeline-section .timeline-start,
  position: absolute;
.main-timeline-section .timeline-end {
  top: calc(100% + 25px);
    position: absolute;
  background: #FFF;
    background: #c8ccd1; /* Updated color */
  padding: 10px;
    border: 3px solid #FFF;
  width: 100px;
    border-radius: 50%;
  text-align:center;
    top: 50%;
  border-radius: 10px;
    transform: translateY(-50%);
  left: calc(50% - 70px);
    width: 30px;
  box-shadow: 0px 0px 2px 2px rgba(0,0,0, 0.2);
    height: 30px;
    z-index: 10;
}
}
 
.timeline-period:before {
.main-timeline-section .timeline-end {
  width: 15px;
    right: 0;
  height: 15px;
  background: #FFF;
  border-radius: 50%;
  content: "";
  position: absolute;
  top: -20px;
  left: calc(50% - 5.5px);
  z-index: 2;
}
}


.main-timeline-section .conference-center-line {
.timeline-content:nth-child(even) {
    position: absolute;
  align-self: flex-end;
    width: 100%;
    height: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: #c8ccd1; /* Updated color */
}
}
 
.timeline-content:nth-child(even):before {
.timeline-article {
     top: -15px;  
     width: 50%; /* Adjusted width for better spacing */
    position: relative;
    min-height: 300px;
}
}
 
.timeline-content:nth-child(even):after {
.timeline-article .meta-date {
     top: -25px;
    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-content:nth-child(even) .timeline-period {
.timeline-article .content-box {
  bottom: 115.25%;
    border: 3px solid #c8ccd1; /* Updated color */
  top: unset;
    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-content:nth-child(even) .timeline-period:before {
.timeline-article-top .content-box:before,
  top: calc(100% + 5px);
.timeline-article-bottom .content-box:before {
    border-bottom-color: #c8ccd1; /* Updated color */
    border-top-color: #c8ccd1; /* Updated color */
}
}

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"