20,263
edits
Template:Timeline/styles.css: Difference between revisions
line now fades in above the first item and fades out after the last item
(Iritscen changed the content model of the page Template:Timeline/styles.css from "wikitext" to "Sanitized CSS") Tag: content model change |
(line now fades in above the first item and fades out after the last item) |
||
| (2 intermediate revisions by the same user not shown) | |||
| Line 2: | Line 2: | ||
.wikitable.timeline | .wikitable.timeline | ||
{ | { | ||
--timeline-x:160px; /* position of divider */ | |||
border-collapse:collapse; | border-collapse:collapse; | ||
width:100%; | width:100%; | ||
border:none; | border:none; | ||
background:transparent; | background:transparent; | ||
position:relative; | |||
} | } | ||
/* Remove default wikitable borders */ | |||
.wikitable.timeline td | .wikitable.timeline td | ||
{ | { | ||
| Line 16: | Line 20: | ||
} | } | ||
/* | /* Date column */ | ||
.wikitable.timeline td:first-child | .wikitable.timeline td:first-child | ||
{ | { | ||
width: | width:138px; | ||
text-align:right; | text-align:right; | ||
font-weight:600; | font-weight:600; | ||
| Line 26: | Line 30: | ||
} | } | ||
/* | /* Event column */ | ||
.wikitable.timeline td: | .wikitable.timeline td:nth-child(2) | ||
{ | |||
padding-left:1.5em; | |||
} | |||
/* Single vertical line */ | |||
.wikitable.timeline::before | |||
{ | { | ||
content:""; | content:""; | ||
position:absolute; | position:absolute; | ||
top: | |||
/* Extend beyond table so fade happens outside rows */ | |||
top:-40px; | |||
bottom:-40px; | |||
left:var(--timeline-x); | |||
transform:translateX(-50%); | |||
width:2px; | width:2px; | ||
background:linear-gradient( | |||
to bottom, | |||
rgba(221,221,221,0) 0px, | |||
rgba(221,221,221,1) 40px, | |||
rgba(221,221,221,1) calc(100% - 40px), | |||
rgba(221,221,221,0) 100% | |||
); | |||
} | } | ||
/* Circular | /* Circular markers */ | ||
.wikitable.timeline tr td:first-child::before | .wikitable.timeline tr td:first-child::before | ||
{ | { | ||
content:""; | content:""; | ||
position:absolute; | position:absolute; | ||
left:var(--timeline-x); | |||
transform:translate(-50%, 0); /* center on line */ | |||
top:1.2em; | top:1.2em; | ||
width:10px; | width:10px; | ||
height:10px; | height:10px; | ||
background-color:#fff; | background-color:#fff; | ||
border:2px solid #4a90e2; | border:2px solid #4a90e2; | ||
| Line 58: | Line 79: | ||
z-index:1; | z-index:1; | ||
} | } | ||
/*[[Category:Table templates]]*/ | /*[[Category:Table templates]]*/ | ||