Dogcraft Wiki
Archive/Horizontal timeline/styles.css
From Dogcraft Wiki
.timeline ul {
margin-left: 0;
display: grid;
grid-template-rows: 1fr 1fr;
overflow-x: scroll;
row-gap: 31px;
height: 100%;
margin-bottom: 0;
box-sizing: border-box;
overflow-y: clip;
background: white;
}
.timeline li {
white-space: nowrap;
display: inline;
padding: 5px 0;
box-sizing: border-box;
}
.timeline li {
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::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 {
position: relative;
}
.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:nth-child(2n-1) > :first-child {
border-bottom: 3px solid black;
height: 100%;
margin-bottom: 14px;
position: relative;
}
.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;
}
This page was last modified on 19 December 2022, at 16:03. (5 months ago)