Different-Timeline en

Installations 3 Likes 6

This is a different take on Vertical Timelines made by Salvastos, using his core idea but trying to retain more screen space for information.

This is designed to work with "Skylarks Theme" and shares its variables.

:root {
--sky-page-radius: 4px;
--sky-background-color: #C7C9B8;
--sky-page-color: #FFFFFF;
--sky-icon-background-color: #d2d6de;
--sky-icon-color: #666;
--sky-line-color: #ddd;
--sky-header-color: #555;
}

Latest version 2.0 View content

Released 3 years ago

Tweaked to work with Skylarks Theme

Plugin CSS for 2.0


/* Set vars */
:root {
    --sky-page-radius: 4px; /* var(--sky-page-radius) */

    --sky-background-color: #C7C9B8; /* var(--sky-background-color) */
    --sky-page-color: #FFFFFF; /* var(--sky-page-color) */
    --sky-icon-background-color: #d2d6de; /* var(--sky-icon-background-color) */
    --sky-icon-color: #666; /* var(--sky-icon-color) */
    --sky-line-color: #ddd; /* var(--sky-line-color) */
    --sky-header-color: #555; /* var(--sky-header-color) */
}


.timeline > li > .timeline-item > .timeline-header {
    color: var(--sky-header-color);
}

.timeline:before {
    background: var(--sky-line-color);
}

.timeline > li > .ra,
.timeline > li > .fa,
.timeline > li > .fab,
.timeline > li > .fas {
    color: var(--sky-icon-color);
    background: var(--sky-icon-background-color);
}

.timeline-body:not(:hover):before {
    border-radius: 0 0 var(--sky-page-radius) var(--sky-page-radius);
    background: linear-gradient(transparent,var(--sky-page-color));
}

@media (min-width:768px) {
    /* Hide unnecessary elements */
    .timeline-footer,
    .timeline-body,
    .timeline > li::after,
    .timeline > li::before {
        display: none;
    }

    .timeline-body {
        display: block;
    }

    .timeline::before {
        left: calc(25% - 3px);
        width: 6px;
    }

    /* Position events */
    .timeline > li {
        left: 25%;
        margin: 0 0 15px 0;
        width: 75%;
        padding-right: 25px;
    }

    /* Position markers */
    .timeline > li > .ra,
    .timeline > li > .fa,
    .timeline > li > .fas {
        position: absolute;
        top: 15px;
        left: -15px;
     }
    
    .timeline > li > .timeline-item {
        margin-left: 25px;
        margin-right: 0px;
        position: relative;
    }

    .timeline > li > .timeline-item > .time {
        width: 24px;
        padding: 5px;
    }

    .timeline > li > .timeline-item > .timeline-header {
        margin: 0;
        right: calc(100% + 50px);
        font-weight: 900;
        position: absolute;
        width: 30%;
        padding: 10px;
        text-align: center;
        overflow: hidden;
        max-height: 100px;
        border: none;
    }

    .timeline > li .text-muted {
        width: 100%;
        float: right;
    }

    .timeline-body {
        max-height: 150px;
        overflow: hidden;
        min-height: 100px;
    }

    .timeline-body:hover {
        max-height: none;
        overflow: auto;
    }

    .timeline-body:not(:hover):before {
        content: "";
        width: 100%;
        height: 30%;
        position: absolute;
        left: 0;
        bottom: 0;
    }

}