Template:Timeline/styles.css: Difference between revisions

From OniGalore
m (comment tweaks)
(line now vertically fades at top and bottom)
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:
}
}


/* First column: date */
/* Date column */
.wikitable.timeline td:first-child
.wikitable.timeline td:first-child
{
{
     width:160px;
     width:138px;
     text-align:right;
     text-align:right;
     font-weight:600;
     font-weight:600;
Line 26: Line 30:
}
}


/* Vertical line */
/* Event column */
.wikitable.timeline td:first-child::after
.wikitable.timeline td:nth-child(2)
{
    padding-left:1.5em;
}
 
/* Single vertical line */
.wikitable.timeline::before
{
{
     content:"";
     content:"";
     position:absolute;
     position:absolute;
     top:0;
     top:0;
     right:0;
     bottom:0;
 
    left:var(--timeline-x);
    transform:translateX(-50%);  /* center on divider */
 
     width:2px;
     width:2px;
    height:100%;
    background-color:#ddd;
}


/* Second column: event */
    background:linear-gradient(
.wikitable.timeline td:nth-child(2)
        to bottom,
{
        rgba(221,221,221,0) 0%,
     padding-left:1.5em;
        rgba(221,221,221,1) 8%,
        rgba(221,221,221,1) 92%,
        rgba(221,221,221,0) 100%
     );
}
}


/* Circular marker */
/* Circular markers */
.wikitable.timeline tr td:first-child::before
.wikitable.timeline tr td:first-child::before
{
{
     content:"";
     content:"";
     position:absolute;
     position:absolute;
     right:-6px;
 
     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 77:
     z-index:1;
     z-index:1;
}
}
/*[[Category:Table templates]]*/


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

Revision as of 03:04, 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;
    top:0;
    bottom:0;

    left:var(--timeline-x);
    transform:translateX(-50%);   /* center on divider */

    width:2px;

    background:linear-gradient(
        to bottom,
        rgba(221,221,221,0) 0%,
        rgba(221,221,221,1) 8%,
        rgba(221,221,221,1) 92%,
        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]]*/