jalad25_vertical-timeline-list/styles.css

/* #region Plugin */

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

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

  /* Timeline Dot Children Styling */
  --vertical-timeline-list-dotChildren-start-add-padding: 25px;
}

/* Hides indentation guide only on timeline */
.show-indentation-guide li.vertical-timeline-list ul::before {
  border-inline-end: none;
}

/* Timeline */
li.vertical-timeline-list {
  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;
  }

  /* Timeline Bullets & Line */
  > ul > li {
    border-inline-start-width: var(--vertical-timeline-list-line-width);
    border-inline-start-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-inline-start-color: var(--vertical-timeline-list-line-color);

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

    > span.list-bullet {
      padding-inline-end: var(--vertical-timeline-list-dot-end-padding);
			&:after {
				width: var(--vertical-timeline-list-dot-size);
				height: var(--vertical-timeline-list-dot-size);
			}

			&:not(.vertical-timeline-list-collapsible-bullet) {
				&:after {
					background-color: var(--vertical-timeline-list-dot-color);
					color: var(--vertical-timeline-list-dot-color);
				}
			}

			&.vertical-timeline-list-collapsible-bullet {
				&:after {
					background-color: var(--vertical-timeline-list-dot-collapsible-color);
				}

				&:hover {
					&:after {
						box-shadow: 0 0 0 4px var(--vertical-timeline-list-dot-collapsible-shadow-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 */
    }

    > ul > li {
      border-radius: 10px;
      margin-inline-start: var(--vertical-timeline-list-line-margin-inline-start);
      padding: var(--vertical-timeline-list-dotChildren-padding);
      padding-inline-start: calc(var(--vertical-timeline-list-dotChildren-start-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);
      }
    }

		.vertical-timeline-list-collapse-disabled {
			pointer-events: none;
			cursor: not-allowed;
		}
  }
}

/* #endregion */

/* #region Settings */

.vertical-timeline-list-setting-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.75em 0;

  th, td {
    border: none;
    padding: 0.5em 0.75em;
    vertical-align: middle;
  }

  thead th {
    text-align: left;
    font-weight: 600;
    color: var(--text-muted);
    font-size: var(--font-ui-smaller);
    border-bottom: 1px solid var(--background-modifier-border);
  }

  tbody tr + tr td {
    border-top: 1px solid var(--background-modifier-border);
  }

  .vertical-timeline-list-setting-table-label {
    width: 100%;
  }

  .vertical-timeline-list-setting-table-name {
    color: var(--text-normal);
    font-size: var(--font-ui-medium);
  }

  .vertical-timeline-list-setting-table-desc {
    color: var(--text-muted);
    font-size: var(--font-ui-smaller);
    margin-top: 0.15em;
  }

  .vertical-timeline-list-setting-table-swatch {
    width: 1px;
    text-align: center;
    white-space: nowrap;

    input[type="color"] {
      width: 32px;
      height: 32px;
      border: 1px solid var(--background-modifier-border);
      border-radius: 4px;
      padding: 0;
      cursor: pointer;
      background: transparent;
    }
  }
}

/* #endregion */