trilium-timeline/Timeline Widget/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*/
    body, html {
      font-family: sans-serif;
    }
    
    /** 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;
    }
    
    /* 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>