Altered the snippet to work within callouts so that other lists in a note are unaffected

[ThornedRose]

First, thank you so much for this plugin and snippet!

I used the snippet with great success in some notes. However, I was running into issues where I wanted to have both a timeline and a list in the same note. So I modified the snippet CSS so that it only works inside a callout called "timeline". e.g.

>[!timeline]
>- Date
>- First thing that happened
>- Something grand and [[wonderful]] happened first on this date. Happy.
>
>- Date 2
>- Another thing occured
>- A less good thing occured on this date.[^1] Sad.

In the CSS I also altered the cssclass names so that they're more human readable (I have Memory Impairment and there was no way I would remember what line-4 or body-2, etc. would mean). They are as follows: line-2 -> timeline-line-2 line-3 -> timeline-line-3 line-4 -> timeline-line-4 etc.

body-2 -> timeline-box-2 body-3 -> timeline-box-3 etc.

There's an added cssclass that can be added to the YAML to hide the callout title so it can fit in better with the rest of the note: timeline-hide-title

There's some other minor changes as noted in the CSS comments.

Full altered CSS snippet as follows:

CSS Code

.callout[data-callout="timeline"] { /* Remove background of callout, change the icon to a clock and give it the same colour as an H2 title */
  background: none;
  --callout-icon: clock;
  --callout-color: var(--h2-color);
}

.timeline-hide-title .callout[data-callout="timeline"] .callout-title { /* Add "timeline-hide-title" to YAML cssclass to optionally hide the timeline callout title */
  display: none;
}

/***** Following has been adapted from: https://github.com/George-debug/obsidian-timeline/tree/master/src/style/snippet *****/

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

.callout[data-callout="timeline"] {
  --timeline-active-color: var(--text-accent); /* Had to change this from --timeline-active-color to --text-accent because it was coming up as "not defined" resulting in some funky colours */
}

.callout[data-callout="timeline"].active-color-background-modifier-success {
  --timeline-active-color: var(--background-modifier-success);
}

.callout[data-callout="timeline"].active-color-background-modifier-error {
  --timeline-active-color: var(--background-modifier-error);
}

.callout[data-callout="timeline"].active-color-background-modifier-error-hover {
  --timeline-active-color: var(--background-modifier-error-hover);
}

.callout[data-callout="timeline"].active-color-text-accent {
  --timeline-active-color: var(--text-accent);
}

.callout[data-callout="timeline"].active-color-text-accent-hover {
  --timeline-active-color: var(--text-accent-hover);
}

.callout[data-callout="timeline"].active-color-text-error {
  --timeline-active-color: var(--text-error);
}

.callout[data-callout="timeline"].active-color-text-error-hover {
  --timeline-active-color: var(--text-error-hover);
}

.callout[data-callout="timeline"].active-color-text-selection {
  --timeline-active-color: var(--text-selection);
}

.callout[data-callout="timeline"].active-color-interactive-accent {
  --timeline-active-color: var(--interactive-accent);
}

.callout[data-callout="timeline"].active-color-interactive-accent-hover {
  --timeline-active-color: var(--interactive-accent-hover);
}

.callout[data-callout="timeline"].active-color-interactive-success {
  --timeline-active-color: var(--interactive-success);
}

.callout[data-callout="timeline"] ul:not(ul ul) {
  display: grid;
  grid-template-columns: auto auto 1fr;
  column-gap: 1.5rem;
  margin: 2.3rem 0;
}
.callout[data-callout="timeline"] ul:not(ul ul) > li {
  list-style: none;
}
.callout[data-callout="timeline"] .list-bullet { /* For some reason bullets still show without this */
  display: none;
}
.callout[data-callout="timeline"] ul:not(ul ul) > li > *:first-child {
  margin-top: 0;
}
.callout[data-callout="timeline"] ul:not(ul ul) > li > *:last-child {
  margin-bottom: 0;
}
.callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n), .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+2) {
  grid-column: 3;
}
.callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1), .callout[data-callout="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;
}
.callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1) > *, .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+2) > * {
  font-size: 1.3rem;
  font-weight: bold;
}
.callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1) {
  grid-column: 1;
  position: relative;
  justify-self: right;
  text-align: right;
}
.callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::before, .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::after {
  content: " ";
  position: absolute;
  height: 100%;
  width: 0.5rem;
  right: -2rem;
  top: 0;
}
.callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::before {
  background-color: var(--background-primary);
}
.callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::after {
  background-color: var(--text-normal);
  opacity: 0.25;
}
.callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n) {
  position: relative;
  margin-bottom: 4.5rem;
  padding-top: 0.4em;
}
.callout[data-callout="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%);
}
.callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n):last-child {
  margin-bottom: 0.4em;
}
.callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n):last-child::after {
  display: none;
}
.callout[data-callout="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-box-2 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+2), .timeline-box-2 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n), .timeline-box-3 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+2), .timeline-box-3 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n), .timeline-box-4 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+2), .timeline-box-4 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n) {
  background-color: var(--background-primary-alt);
}
.timeline-box-2 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n), .timeline-box-3 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n), .timeline-box-4 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n) {
  margin-bottom: 2.25rem;
}
.timeline-box-2 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n):last-child, .timeline-box-3 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n):last-child, .timeline-box-4 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n):last-child {
  margin-bottom: 0.4em;
}
.timeline-box-2 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n)::after, .timeline-box-3 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n)::after, .timeline-box-4 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n)::after {
  display: none;
}

.timeline-box-2 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n), .timeline-box-2 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+2), .timeline-box-4 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n), .timeline-box-4 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+2) {
  padding: 1.5rem;
  padding-top: 0.4em;
}
.timeline-box-2 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+2), .timeline-box-4 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+2) {
  padding-bottom: 0;
}
.timeline-box-2 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1), .timeline-box-4 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1) {
  margin-top: 0.4em;
}

.timeline-box-2 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+2) {
  border-radius: 1.5rem 1.5rem 0 0;
}
.timeline-box-2 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n) {
  border-radius: 0 0 1.5rem 1.5rem;
}

.timeline-box-3 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+2), .timeline-box-3 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n) {
  margin-left: 1rem;
}
.timeline-box-3 .callout[data-callout="timeline"] 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-box-3 .callout[data-callout="timeline"] 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-box-3 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n) {
  padding: 1.5rem;
}

.timeline-box-4 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+2), .timeline-box-4 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n) {
  border-left: 0.3rem solid var(--timeline-active-color);
}

.timeline-line-2 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::before, .timeline-line-2 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::after {
  right: -2.2rem;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
}
.timeline-line-2 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::before {
  height: 1.2rem;
  width: 1.2rem;
}
.timeline-line-2 .callout[data-callout="timeline"] 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 .callout[data-callout="timeline"] ul:not(ul ul)::before {
  width: 0.2rem;
  opacity: 0.15;
}

.timeline-line-3 .callout[data-callout="timeline"] 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 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::after {
  background: transparent;
}
.timeline-line-3 .callout[data-callout="timeline"] ul:not(ul ul)::before {
  width: 0.3rem;
  opacity: 0.15;
}

.timeline-line-4 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::before, .timeline-line-4 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::after {
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
}
.timeline-line-4 .callout[data-callout="timeline"] 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 .callout[data-callout="timeline"] 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 .callout[data-callout="timeline"] 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 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::before, .timeline-line-5 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::after {
  top: 50%;
}
.timeline-line-5 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::before {
  width: 3rem;
  height: 3rem;
  right: -3.1rem;
  transform: translateY(-50%);
}
.timeline-line-5 .callout[data-callout="timeline"] 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 .callout[data-callout="timeline"] ul:not(ul ul)::before {
  width: 0.2rem;
  opacity: 0.25;
}

Thanks again! :)