Template:Timeline/styles.css: Difference between revisions

Latest revision as of 03:11, 12 February 2026

/* Base table styling */
.wikitable.timeline
{
    --timeline-x:160px; /* position of divider */

    border-collapse:collapse;
    width:100%;
    border:none;
    background:transparent;
    position:relative;
}

/* Remove default wikitable borders */
.wikitable.timeline td
{
    border:none;
    vertical-align:top;
    padding:1em 1em 1em 0;
    position:relative;
}

/* Date column */
.wikitable.timeline td:first-child
{
    width:138px;
    text-align:right;
    font-weight:600;
    color:#555;
    padding-right:1.5em;
}

/* Event column */
.wikitable.timeline td:nth-child(2)
{
    padding-left:1.5em;
}

/* Single vertical line */
.wikitable.timeline::before
{
    content:"";
    position:absolute;

    /* Extend beyond table so fade happens outside rows */
    top:-40px;
    bottom:-40px;

    left:var(--timeline-x);
    transform:translateX(-50%);

    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 markers */
.wikitable.timeline tr td:first-child::before
{
    content:"";
    position:absolute;

    left:var(--timeline-x);
    transform:translate(-50%, 0); /* center on line */

    top:1.2em;

    width:10px;
    height:10px;

    background-color:#fff;
    border:2px solid #4a90e2;
    border-radius:50%;
    z-index:1;
}

/*[[Category:Table templates]]*/