Dogcraft Wiki
Archive/Horizontal timeline/styles.css
From Dogcraft Wiki
.timeline {
position: relative;
}
.timeline ul {
margin-left: 0;
display: grid;
grid-template-rows: 1fr 1fr;
overflow-x: scroll;
row-gap: 95px;
height: 100%;
margin-bottom: 0;
box-sizing: border-box;
overflow-y: clip;
background: white;
}
.timeline li {
display: inline;
white-space: nowrap;
padding: 5px 0;
box-sizing: border-box;
grid-row-start: 1;
grid-row-end: 3;
display: grid;
grid-template-rows: 1fr 1fr;
height: 100%;
}
.timeline li:nth-child(2n) > :first-child {
grid-row-start: 2;
border-top: 3px solid black;
display: flex;
flex-direction: column;
justify-content: end;
height: 100%;
position: relative;
}
.timeline li:nth-child(2n-1) > :first-child {
border-bottom: 3px solid black;
height: 100%;
margin-bottom: 14px;
position: relative;
}
.timeline::before {
content: '';
display: block;
height: 100%;
position: absolute;
width: .8rem;
left: 0;
top: 0;
background: linear-gradient(to right, white, transparent);
border-radius: 8px 0 0 8px;
z-index: 1;
}
.timeline::after {
content: '';
display: block;
height: 100%;
position: absolute;
width: .8rem;
right: 0;
top: 0;
background: linear-gradient(to left, white, transparent);
border-radius: 3px;
}
.timeline li:first-of-type > :first-child {
padding-left: .8rem;
}
.timeline li:last-of-type > :first-child {
padding-right: .8rem;
}
.timeline li:nth-child(2n) > :first-child::before {
content: '|';
width: 100%;
position: absolute;
top: -7px;
text-align: center;
color: black;
font-size: 14px;
}
.timeline li:nth-child(2n-1) > :first-child::after {
content: '|';
position: absolute;
width: 100%;
text-align: center;
bottom: -5px;
left: 0;
color: black;
font-size: 14px;
}
.timeline li:first-of-type > :first-child::before {
content: '.';
position: absolute;
color: black;
font-weight: bold;
font-size: 10px;
bottom: -7px;
left: 9px;
background: black;
height: 13px;
border-radius: 10px;
}
.timeline li:last-of-type > :first-child::after {
content: '.';
position: absolute;
color: black;
font-weight: bold;
font-size: 10px;
top: -8px;
right: 9px;
background: black;
height: 13px;
border-radius: 10px;
}