Dogcraft Wiki
Archive/Horizontal timeline/styles.css
From Dogcraft Wiki
No edit summary |
No edit summary |
||
Line 97: | Line 97: | ||
color: black; | color: black; | ||
font-size: 14px; | 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; | |||
bottom: -7px; | |||
right: 9px; | |||
background: black; | |||
height: 13px; | |||
border-radius: 10px; | |||
} | } |
Revision as of 16:30, 19 December 2022
.timeline {
position: relative;
}
.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 {
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;
bottom: -7px;
right: 9px;
background: black;
height: 13px;
border-radius: 10px;
}
This page was last modified on 19 December 2022, at 16:30. (5 months ago)