render.html

<div id="timeline">
    <div id="menu"></div>
</div>

<style>
    /* CUSTOM CSS */
    .session {
        background-color: white;
        border-color: white;
    }

    .astrological {
        background-color: royalblue;
        border-color: royalblue;
    }

    .player {
        background-color: orange;
        border-color: orange;
    }

    .omen {
        background-color: blueviolet;
        border-color: blueviolet;
    }

    .agent {
        background-color: forestgreen;
        border-color: forestgreen;
    }

    .local {
        background-color: orangered;
        border-color: orangered;
    }

    .global {
        background-color: brown;
        border-color: brown;
    }

    .era {
        /*background-color : brown;*/
        /*border-color : brown;*/
    }

    /* GENERAL CSS*/

    /** Fix window scrolling bug**/
    .note-detail.type-render, .note-detail-render {
        height: 100%;
    }

    /* Wrapper */
    #timeline {
        height: 100%;
    }

    /* button menu */
    #menu {
        z-index: 5;
        display: flex;
        justify-content: center;
        font-size: small;
    }

    #menu > input {
        border-color: gray;
        border-radius: 5px;
        border-width: 1px;
        background-color: #4c4949 !important;
        margin: 0 2px;
    }

    #menu > input.toggled {
        border-style: inset;
        background-color: #272626 !important;
    }

    /* add visible dotted line to ranges */
    .vis-item.vis-range {
        border-style: dashed !important;
        border-color: black !important;
        border-width: 2px;
    }

    /* change text and label color */
    .vis-text, .vis-label {
        color: lightgray !important;
    }

    /* change link color */
    .vis-item-content > a {
        color: #1a1a1a;
        font-size: small;
    }

    /* change current time marker color */
    .vis-current-time {
        background-color: red;
    }

    /* alternating column backgrounds */
    .vis-time-axis .vis-grid.vis-odd {
        background: #424242;
    }

    /* gray background in weekends, white text color */
    .vis-time-axis .vis-grid.vis-saturday,
    .vis-time-axis .vis-grid.vis-sunday {
        background: gray;
    }

    .vis-time-axis .vis-text.vis-saturday,
    .vis-time-axis .vis-text.vis-sunday {
        color: dimgray;
    }
    
    /* Show click cursor on day numbers */
    .vis-time-axis.vis-foreground .vis-text.vis-minor {
        cursor: pointer;
    }
    .vis-time-axis.vis-foreground .vis-text.vis-minor:hover {
        font-weight: bold;
    }

    /* interior grid color */
    .vis-grid.vis-minor {
        border-color: dimgray !important;
    }

    .vis-foreground .vis-group {
        border-color: dimgray !important;
    }

    /* reduce padding */
    .vis-item .vis-item-content {
        padding: 2px;
    }
</style>