trilium-timeline/Timeline Widget/render.html

<div id="timeline">
    <div class="menu">
        <input type="button" id="toggle_players" value="Toggle Joueurs">
        <input type="button" id="toggle_agents" value="Toggle Agents">
        <input type="button" id="toggle_events" value="Toggle Évenements">
        <input type="button" id="toggle_prophecies" value="Toggle Prophéties">
        <input type="button" id="toggle_astros" value="Toggle Astrologique">
        <input type="button" id="toggle_sessions" value="Toggle Sessions">
    </div>
</div>

<style>
    body, html {
      font-family: sans-serif;
    }
    
    /* button menu */
    .menu {
        z-index: 5;
        right: 2px;
        top: 140px;
        font-size: small;
    }
    .menu > input {
        border-color: gray;
        border-radius: 5px;
        border-width: 1px;
    }
        
    
    /* add visible dotted line to ranges */
    .vis-item.vis-range {
        border-style: dotted !important;
        border-color: black !important;
        border-width: 1px;
    }
    
    /* change text and label color */
    .vis-text, .vis-label {
        color: lightgray !important;
    }
    
    /* change link color */
    .vis-item-content > a {
        color: #1a1a1a;
        font-size: small;
    }
    
    /* custom event style */
    .default {
        background-color : brown;
        border-color : brown;
    }
    .era {
        /*background-color : brown;*/
        /*border-color : brown;*/
    }
    .player {
        background-color : orange;
        border-color: orange;
    }
    .agent {
        background-color: forestgreen;
        border-color: forestgreen;
    }
    .prophecy {
        background-color: blueviolet;
        border-color : blueviolet;
    }
    .astrological {
        background-color: royalblue;
        border-color : royalblue;
    }
    
    /* 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>