/* Set vars */
:root {
--sky-page-radius: 4px; /* var(--sky-page-radius) */
--sky-background-color: #C7C9B8; /* var(--sky-background-color) */
--sky-page-color: #FFFFFF; /* var(--sky-page-color) */
--sky-icon-background-color: #d2d6de; /* var(--sky-icon-background-color) */
--sky-icon-color: #666; /* var(--sky-icon-color) */
--sky-line-color: #ddd; /* var(--sky-line-color) */
--sky-header-color: #555; /* var(--sky-header-color) */
}
.timeline > li > .timeline-item > .timeline-header {
color: var(--sky-header-color);
}
.timeline:before {
background: var(--sky-line-color);
}
.timeline > li > .ra,
.timeline > li > .fa,
.timeline > li > .fab,
.timeline > li > .fas {
color: var(--sky-icon-color);
background: var(--sky-icon-background-color);
}
.timeline-body:not(:hover):before {
border-radius: 0 0 var(--sky-page-radius) var(--sky-page-radius);
background: linear-gradient(transparent,var(--sky-page-color));
}
@media (min-width:768px) {
/* Hide unnecessary elements */
.timeline-footer,
.timeline-body,
.timeline > li::after,
.timeline > li::before {
display: none;
}
.timeline-body {
display: block;
}
.timeline::before {
left: calc(25% - 3px);
width: 6px;
}
/* Position events */
.timeline > li {
left: 25%;
margin: 0 0 15px 0;
width: 75%;
padding-right: 25px;
}
/* Position markers */
.timeline > li > .ra,
.timeline > li > .fa,
.timeline > li > .fas {
position: absolute;
top: 15px;
left: -15px;
}
.timeline > li > .timeline-item {
margin-left: 25px;
margin-right: 0px;
position: relative;
}
.timeline > li > .timeline-item > .time {
width: 24px;
padding: 5px;
}
.timeline > li > .timeline-item > .timeline-header {
margin: 0;
right: calc(100% + 50px);
font-weight: 900;
position: absolute;
width: 30%;
padding: 10px;
text-align: center;
overflow: hidden;
max-height: 100px;
border: none;
}
.timeline > li .text-muted {
width: 100%;
float: right;
}
.timeline-body {
max-height: 150px;
overflow: hidden;
min-height: 100px;
}
.timeline-body:hover {
max-height: none;
overflow: auto;
}
.timeline-body:not(:hover):before {
content: "";
width: 100%;
height: 30%;
position: absolute;
left: 0;
bottom: 0;
}
}
