Dogcraft Wiki
Archive/Horizontal timeline/styles.css
From Dogcraft Wiki
(Created page with ".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: borde...") |
m (Domino moved page Template:Horizontal timeline/styles.css to Dogcraft Wiki:Archive/Horizontal timeline/styles.css without leaving a redirect) |
||
(4 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
.timeline { | |||
position: relative; | |||
} | |||
.timeline ul { | .timeline ul { | ||
margin-left: 0; | margin-left: 0; | ||
Line 4: | Line 8: | ||
grid-template-rows: 1fr 1fr; | grid-template-rows: 1fr 1fr; | ||
overflow-x: scroll; | overflow-x: scroll; | ||
row-gap: | row-gap: 95px; | ||
height: 100%; | height: 100%; | ||
margin-bottom: 0; | margin-bottom: 0; | ||
Line 11: | Line 15: | ||
background: white; | background: white; | ||
} | } | ||
.timeline li { | .timeline li { | ||
display: inline; | |||
white-space: nowrap; | white-space: nowrap; | ||
padding: 5px 0; | padding: 5px 0; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
grid-row-start: 1; | grid-row-start: 1; | ||
grid-row-end: 3; | grid-row-end: 3; | ||
Line 24: | Line 27: | ||
height: 100%; | height: 100%; | ||
} | } | ||
.timeline li:nth-child(2n) > :first-child { | .timeline li:nth-child(2n) > :first-child { | ||
grid-row-start: 2; | grid-row-start: 2; | ||
Line 33: | Line 37: | ||
position: relative; | position: relative; | ||
} | } | ||
.timeline li:nth-child(2n-1) > :first-child { | |||
border-bottom: 3px solid black; | |||
height: 100%; | |||
margin-bottom: 14px; | |||
position: relative; | |||
} | |||
.timeline::before { | .timeline::before { | ||
content: ''; | content: ''; | ||
Line 45: | Line 57: | ||
z-index: 1; | z-index: 1; | ||
} | } | ||
.timeline::after { | .timeline::after { | ||
content: ''; | content: ''; | ||
Line 59: | Line 69: | ||
border-radius: 3px; | border-radius: 3px; | ||
} | } | ||
.timeline li:first-of-type > :first-child { | .timeline li:first-of-type > :first-child { | ||
padding-left: .8rem; | padding-left: .8rem; | ||
} | } | ||
.timeline li:last-of-type > :first-child { | .timeline li:last-of-type > :first-child { | ||
padding-right: .8rem; | padding-right: .8rem; | ||
} | } | ||
.timeline li:nth-child(2n) > :first-child::before { | .timeline li:nth-child(2n) > :first-child::before { | ||
content: '|'; | content: '|'; | ||
Line 80: | Line 87: | ||
font-size: 14px; | font-size: 14px; | ||
} | } | ||
.timeline li:nth-child(2n-1) > :first-child::after { | .timeline li:nth-child(2n-1) > :first-child::after { | ||
content: '|'; | content: '|'; | ||
Line 89: | 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; | |||
top: -8px; | |||
right: 9px; | |||
background: black; | |||
height: 13px; | |||
border-radius: 10px; | |||
} | } |
Latest revision as of 13:40, 4 December 2023
.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;
}