Dots in Timeline

[DieMeister]

Maybe I'm missing something and there's an easy fix to this but the timeline always shows these dots from the list and i don't know how to remove them

[AdamGorbert]

Hey, I found a clumsy fix for this as I had the same issue, you just need to add this to the snippet

.timeline ul:not(ul ul) > li:nth-child(3n+2)::before {
  display: none !important;
}
.timeline ul:not(ul ul) > li:nth-child(3n+3)::before {
  display: none !important;
}

[DieMeister]

maybe I did something wrong but this doesn't seem to have an affect on how the timeline is displayed for me.
If it makes a difference: I changed the color to
.timeline { --timeline-active-color: #9f370a; }
but i don't think it should make a difference apart from changing the color.

[alexwilkerson]

Try this:

.timeline.spaced-lines ul:not(ul ul) > li:nth-child(3n) p {
  line-height: 1.7rem;
}

.timeline {
  --timeline-active-color: var(--background-modifier-success);
}

.timeline.active-color-background-modifier-success {
  --timeline-active-color: var(--background-modifier-success);
}

.timeline.active-color-background-modifier-error {
  --timeline-active-color: var(--background-modifier-error);
}

.timeline.active-color-background-modifier-error-hover {
  --timeline-active-color: var(--background-modifier-error-hover);
}

.timeline.active-color-text-accent {
  --timeline-active-color: var(--text-accent);
}

.timeline.active-color-text-accent-hover {
  --timeline-active-color: var(--text-accent-hover);
}

.timeline.active-color-text-error {
  --timeline-active-color: var(--text-error);
}

.timeline.active-color-text-error-hover {
  --timeline-active-color: var(--text-error-hover);
}

.timeline.active-color-text-selection {
  --timeline-active-color: var(--text-selection);
}

.timeline.active-color-interactive-accent {
  --timeline-active-color: var(--interactive-accent);
}

.timeline.active-color-interactive-accent-hover {
  --timeline-active-color: var(--interactive-accent-hover);
}

.timeline.active-color-interactive-success {
  --timeline-active-color: var(--interactive-success);
}

.timeline ul:not(ul ul) {
  display: grid;
  grid-template-columns: auto auto 1fr;
  column-gap: 1.5rem;
  margin: 2.3rem 0;
}

.timeline ul:not(ul ul) > li {
  list-style: none;
}

.timeline ul:not(ul ul) > li > *:first-child {
  margin-top: 0;
}

.timeline ul:not(ul ul) > li > *:last-child {
  margin-bottom: 0;
}

.timeline ul:not(ul ul) > li:nth-child(3n), .timeline ul:not(ul ul) > li:nth-child(3n+2) {
  grid-column: 3;
}

.timeline ul:not(ul ul) > li:nth-child(3n+1), .timeline ul:not(ul ul) > li:nth-child(3n+2) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.4em 0;
  font-size: 1.3rem;
  font-weight: bold;
}

.timeline ul:not(ul ul) > li:nth-child(3n+1) > *, .timeline ul:not(ul ul) > li:nth-child(3n+2) > * {
  font-size: 1.3rem;
  font-weight: bold;
}

.timeline ul:not(ul ul) > li:nth-child(3n+1) {
  grid-column: 1;
  position: relative;
  justify-self: right;
  text-align: right;
}

.timeline ul:not(ul ul) > li:nth-child(3n+1)::before, .timeline ul:not(ul ul) > li:nth-child(3n+1)::after {
  content: " ";
  position: absolute;
  height: 100%;
  width: 0.5rem;
  right: -2rem;
  top: 0;
}

.timeline ul:not(ul ul) > li:nth-child(3n+1)::before {
  background-color: var(--background-primary);
}

.timeline ul:not(ul ul) > li:nth-child(3n+1)::after {
  background-color: var(--text-normal);
  opacity: 0.25;
}

.timeline ul:not(ul ul) > li:nth-child(3n) {
  position: relative;
  margin-bottom: 4.5rem;
  padding-top: 0.4em;
}

.timeline ul:not(ul ul) > li:nth-child(3n)::after {
  content: " ";
  position: absolute;
  border-bottom: 0.1rem dashed var(--text-normal);
  opacity: 0.1;
  width: 100%;
  left: 0;
  bottom: -2.25rem;
  transform: translateY(50%);
}

.timeline ul:not(ul ul) > li:nth-child(3n):last-child {
  margin-bottom: 0.4em;
}

.timeline ul:not(ul ul) > li:nth-child(3n):last-child::after {
  display: none;
}

.timeline ul:not(ul ul)::before {
  content: "";
  height: 100%;
  width: 0.5rem;
  grid-column: 2/span 1;
  grid-row-start: 1;
  grid-row-end: span 1000;
  background-color: var(--text-normal);
  opacity: 0.1;
}

.timeline.body-2 ul:not(ul ul) > li:nth-child(3n+2), .timeline.body-2 ul:not(ul ul) > li:nth-child(3n), .timeline.body-3 ul:not(ul ul) > li:nth-child(3n+2), .timeline.body-3 ul:not(ul ul) > li:nth-child(3n), .timeline.body-4 ul:not(ul ul) > li:nth-child(3n+2), .timeline.body-4 ul:not(ul ul) > li:nth-child(3n) {
  background-color: var(--background-primary-alt);
}

.timeline.body-2 ul:not(ul ul) > li:nth-child(3n), .timeline.body-3 ul:not(ul ul) > li:nth-child(3n), .timeline.body-4 ul:not(ul ul) > li:nth-child(3n) {
  margin-bottom: 2.25rem;
}

.timeline.body-2 ul:not(ul ul) > li:nth-child(3n):last-child, .timeline.body-3 ul:not(ul ul) > li:nth-child(3n):last-child, .timeline.body-4 ul:not(ul ul) > li:nth-child(3n):last-child {
  margin-bottom: 0.4em;
}

.timeline.body-2 ul:not(ul ul) > li:nth-child(3n)::after, .timeline.body-3 ul:not(ul ul) > li:nth-child(3n)::after, .timeline.body-4 ul:not(ul ul) > li:nth-child(3n)::after {
  display: none;
}

.timeline.body-2 ul:not(ul ul) > li:nth-child(3n), .timeline.body-2 ul:not(ul ul) > li:nth-child(3n+2), .timeline.body-4 ul:not(ul ul) > li:nth-child(3n), .timeline.body-4 ul:not(ul ul) > li:nth-child(3n+2) {
  padding: 1.5rem;
  padding-top: 0.4em;
}

.timeline.body-2 ul:not(ul ul) > li:nth-child(3n+2), .timeline.body-4 ul:not(ul ul) > li:nth-child(3n+2) {
  padding-bottom: 0;
}

.timeline.body-2 ul:not(ul ul) > li:nth-child(3n+1), .timeline.body-4 ul:not(ul ul) > li:nth-child(3n+1) {
  margin-top: 0.4em;
}

.timeline.body-2 ul:not(ul ul) > li:nth-child(3n+2) {
  border-radius: 1.5rem 1.5rem 0 0;
  margin: 0 0 0 1.45em;
}

.timeline.body-2 ul:not(ul ul) > li:nth-child(3n) {
  border-radius: 0 0 1.5rem 1.5rem;
}

.timeline.body-3 ul:not(ul ul) > li:nth-child(3n+2), .timeline.body-3 ul:not(ul ul) > li:nth-child(3n) {
  margin-left: 1rem;
}

.timeline.body-3 ul:not(ul ul) > li:nth-child(3n+2) {
  position: relative;
  background: var(--timeline-active-color);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.timeline.body-3 ul:not(ul ul) > li:nth-child(3n+2)::before {
  content: "";
  position: absolute;
  width: 2rem;
  background: var(--timeline-active-color);
  top: 0;
  bottom: 0;
  left: -1rem;
  clip-path: polygon(1rem 0, 100% 0, 100% 100%, 1rem 100%, 0 50%);
}

.timeline.body-3 ul:not(ul ul) > li:nth-child(3n) {
  padding: 1.5rem;
}

.timeline.body-4 ul:not(ul ul) > li:nth-child(3n+2), .timeline.body-4 ul:not(ul ul) > li:nth-child(3n) {
  border-left: 0.3rem solid var(--timeline-active-color);

}

.timeline.body-4 ul:not(ul ul) > li:nth-child(3n+2) {
	  margin: 0 0 0 1.45em;
}

.timeline.line-2 ul:not(ul ul) > li:nth-child(3n+1)::before, .timeline.line-2 ul:not(ul ul) > li:nth-child(3n+1)::after {
  right: -2.2rem;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
}

.timeline.line-2 ul:not(ul ul) > li:nth-child(3n+1)::before {
  height: 1.2rem;
  width: 1.2rem;
}

.timeline.line-2 ul:not(ul ul) > li:nth-child(3n+1)::after {
  background: transparent;
  border: 0.2rem solid var(--text-normal);
  height: 0.8rem;
  width: 0.8rem;
  opacity: 0.15;
}

.timeline.line-2 ul:not(ul ul)::before {
  width: 0.2rem;
  opacity: 0.15;
}

.timeline.line-3 ul:not(ul ul) > li:nth-child(3n+1)::before {
  background: var(--timeline-active-color);
  height: 1rem;
  width: 1rem;
  border: 0.3rem solid var(--background-primary);
  right: -2.45rem;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
}

.timeline.line-3 ul:not(ul ul) > li:nth-child(3n+1)::after {
  background: transparent;
}

.timeline.line-3 ul:not(ul ul)::before {
  width: 0.3rem;
  opacity: 0.15;
}

.timeline.line-4 ul:not(ul ul) > li:nth-child(3n+1)::before, .timeline.line-4 ul:not(ul ul) > li:nth-child(3n+1)::after {
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
}

.timeline.line-4 ul:not(ul ul) > li:nth-child(3n+1)::before {
  background: var(--text-normal);
  height: 1.3rem;
  width: 1.3rem;
  right: -2.225rem;
}

.timeline.line-4 ul:not(ul ul) > li:nth-child(3n+1)::after {
  opacity: 1;
  background: var(--timeline-active-color);
  height: 0.85rem;
  width: 0.85rem;
  right: -2rem;
}

.timeline.line-4 ul:not(ul ul)::before {
  opacity: 1;
  width: 0.15rem;
  background-color: transparent;
  background-image: linear-gradient(var(--text-normal) 60%, rgba(255, 255, 255, 0) 0%);
  background-position: right;
  background-size: 0.15rem 1.5rem;
  background-repeat: repeat-y;
}

.timeline.line-5 ul:not(ul ul) > li:nth-child(3n+1)::before, .timeline.line-5 ul:not(ul ul) > li:nth-child(3n+1)::after {
  top: 50%;
}

.timeline.line-5 ul:not(ul ul) > li:nth-child(3n+1)::before {
  width: 3rem;
  height: 3rem;
  right: -3.1rem;
  transform: translateY(-50%);
}

.timeline.line-5 ul:not(ul ul) > li:nth-child(3n+1)::after {
  width: 1rem;
  height: 1rem;
  right: 0;
  transform: translateY(-50%) translateX(2.1rem) rotate(45deg);
}

.timeline.line-5 ul:not(ul ul)::before {
  width: 0.2rem;
  opacity: 0.25;
}


.timeline.markdown-source-view.mod-cm6 {
    flex-direction: row !important;
}


.timeline:not(.markdown-source-view) span.list-bullet {
	display: none !important;
}

.timeline:before {
	display:none;
}

.timeline ul:not(ul ul)  {
	width: 120%;
}