obsidian-timeline
obsidian-timeline copied to clipboard
George-debug
Altered the snippet to work within callouts so that other lists in a note are unaffected
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;
}
@ThornedRose Thanks for your snippet, it was the only thing that got this plugin to work in editor mode for me.
There is one misalignment of the left edge of the boxes however.
This is the callout text i use
> [!timeline]
> - pre</br> 17th century
> - Origins of coffee
> - adsfas
>
> - 17th century
> - Europe and coffee
> - asdfas
I don't really know anything about css, is this something you can look into?
