jalad25_vertical-timeline-list/styles.css

/* #region Plugin */

body {
  /* Timeline Line Styling */
  --vertical-timeline-list-line-width: 3px;
  --vertical-timeline-list-line-padding: 12px;
  --vertical-timeline-list-line-style: solid;
  --vertical-timeline-list-line-margin-inline-start: 0px;

  /* Timeline Dot Styling */
  --vertical-timeline-list-dot-separation: 10px;
  --vertical-timeline-list-dot-right-padding: 20px;
  --vertical-timeline-list-dot-size: 18px;

  /* Timeline Dot Children Styling */
  --vertical-timeline-list-dotChildren-padding: 10px;
  --vertical-timeline-list-dotChildren-left-add-padding: 25px;
  --vertical-timeline-list-dotChildren-top-margin: 10px;
  --vertical-timeline-list-dotChildren-bottom-margin: 10px;
}

/* Hides indentation guide only on timeline */
.show-indentation-guide .el-ul ul li[data-task="t"] ul::before {
  border-inline-end: none !important;
}

/* Timeline */
.el-ul ul li[data-task="t"] {
  margin-inline-start: var(--vertical-timeline-list-line-margin-inline-start);

  /* Hide Timeline Parent Task */
  > input[type="checkbox"],
  > p input[type="checkbox"],
  > span.list-collapse-indicator {
    display: none !important;
  }

  /* Timeline Bullets & Line */
  > ul > li {
    border-left-width: var(--vertical-timeline-list-line-width);
    border-left-style: var(--vertical-timeline-list-line-style);
    padding-inline: var(--vertical-timeline-list-line-padding);   
    margin-inline-start: var(--vertical-timeline-list-line-margin-inline-start);
    border-left-color: var(--vertical-timeline-list-line-color);

    &:not(:last-child) {
      padding-bottom: var(--vertical-timeline-list-dot-separation);
    }

    > span.list-bullet {
      padding-right: var(--vertical-timeline-list-dot-right-padding);

      &:has(+ span.list-collapse-indicator) {
        &:after {
          background-color: var(--vertical-timeline-list-dot-collapsible-color);
        }
      }

      &:has(+ span.list-collapse-indicator:hover) {
        &:after {
          box-shadow: 0 0 0 4px var(--vertical-timeline-list-dot-collapsible-shadow-color);
        }
      }

      &:after {
        width: var(--vertical-timeline-list-dot-size);
        height: var(--vertical-timeline-list-dot-size);
        background-color: var(--vertical-timeline-list-dot-color);
        color: var(--vertical-timeline-list-dot-color);
      }
    }

    > span.list-collapse-indicator {
      display: var(--vertical-timeline-list-dot-collapsible-display);  /* Allow Collapsing */
      cursor: var(--vertical-timeline-list-dot-collapsible-cursor); /* Allow Collapsing */

      svg {
        color: transparent !important;
      }
    }

    > ul > li {
      border-radius: 10px;
      margin-inline-start: var(--vertical-timeline-list-line-margin-inline-start);
      padding: var(--vertical-timeline-list-dotChildren-padding) var(--vertical-timeline-list-dotChildren-padding) var(--vertical-timeline-list-dotChildren-padding) calc(var(--vertical-timeline-list-dotChildren-left-add-padding) + var(--vertical-timeline-list-dotChildren-padding));
      margin-top: var(--vertical-timeline-list-dotChildren-top-margin);
      background-color: var(--vertical-timeline-list-dotChildren-background-color);

      &:not(:last-child) {
        margin-bottom: var(--vertical-timeline-list-dotChildren-bottom-margin);
      }
    }
  }
}

/* #endregion */

/* #region Settings */

.vertical-timeline-list-setting-section {
  margin-bottom: 10px;

  .vertical-timeline-list-setting-input {
    padding: 0.75em 0 !important;

    .vertical-timeline-list-setting-tooltip {
      display: inline;

      .vertical-timeline-list-setting-tooltip-icon {
        display: inline;
        margin-left: 5px;
      }
      
      .vertical-timeline-list-setting-tooltip-image {
        visibility: hidden;
        width: 500px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px;
        position: absolute;
        z-index: 1;
        opacity: 0;
        transition: opacity 0.3s;
      }

      &:hover,
      &:active {
        .vertical-timeline-list-setting-tooltip-image {
          visibility: visible;
          opacity: 1;
        }
      }
    }

    > *:last-child {
      margin-inline-end: 0.75em !important;
    }
  }

  > .vertical-timeline-list-setting-section-header {
    font-size: larger;
    font-weight: bolder;
    width: 100%;
    border-bottom: 1px solid var(--background-modifier-border) !important;
  }

  .vertical-timeline-list-setting-table {
    caption {
      text-align: left;
      font-style: italic;
      margin: 15px;
    }

    th, td {
      border: none !important;
    }
  }
}

/* #endregion */