Obsidian的时间线效果CSS

时间线的排版样式，在记录某些事件性内容时，特别的直观和有效。在Obsidian里，也可以简单的就能实现。
使用方法：

1. 把CSS片段在后台开启
2. 利用Obsidian里的Callout语法，第一行写时间，第二行记内容，即可实现一条信息的录入。

/*
Timeline Callout settings
作用方法：
> [!timeline] 时间
> 内容
*/
body {
--timeline-title-color: var(--text-normal);
--timeline-title-size: var(--h2-size);
--timeline-title-width: 150px;

--timeline-line-color: var(--color-base-35);
--timeline-line-margin: 16px;
--timeline-line-width: 4px;
--timeline-line-style: solid;

--timeline-dot-color: var(--color-base-70);
--timeline-dot-size: 32px;
--timeline-dot-radius: 100%;
--timeline-dot-border-color: var(--background-primary);
--timeline-dot-border-size: 6px;
--timeline-dot-offset-x: -18px;
--timeline-dot-offset-y: -2px;

--timeline-card-margin: 16px;
--timeline-card-background-color: var(--color-base-30);
--timeline-card-padding-x: 10px;
--timeline-card-padding-y: 16px;
}

/* Timeline styling */
[data-callout="timeline"] {
order: 1;
padding: 0;
margin: 0;
display: grid;
mix-blend-mode: normal;
background-color: unset;
grid-template-columns: var(--timeline-title-width, 150px) auto;
--dot-offset: calc(
var(--timeline-dot-offset-y) + var(--timeline-card-padding-y)
);

.callout-title-inner {
width: 100%;
text-align: right;
color: var(--timeline-title-color);
font-size: var(--timeline-title-size);
margin-top: var(--dot-offset);
}
.callout-icon {
order: 2;
margin-inline: var(--timeline-line-margin);
border-left: var(--timeline-line-width) var(--timeline-line-style)
var(--timeline-line-color);
height: 100%;
position: relative;

&::after {
content: "";
box-sizing: border-box;
background-color: var(--timeline-dot-color);
position: absolute;
border: var(--timeline-dot-border-size) solid
var(--timeline-dot-border-color);
border-radius: var(--timeline-dot-radius);
width: var(--timeline-dot-size);
height: var(--timeline-dot-size);
top: var(--dot-offset);
left: var(--timeline-dot-offset-x);
}
}
.svg-icon {
display: none;
}

.callout-content {
order: 3;
--p-spacing: 0.5rem;
background-color: var(--timeline-card-background-color);
border-radius: 1rem;
margin-bottom: var(--timeline-card-margin);
padding: var(--timeline-card-padding-x) var(--timeline-card-padding-y);

& > h2:first-child {
margin-top: 0;
}
}
}

/* Stacking multiple timelines */
div:not(:has(> [data-callout="timeline"])) + div > [data-callout="timeline"] {
margin-top: var(--p-spacing);
}
div:has(> [data-callout="timeline"]) + div:not(> [data-callout="timeline"]) {
margin-bottom: 1rem;
}

/* Timeline dot colors */
[data-callout-metadata="red"] {
--timeline-dot-color: var(--color-red);
}
[data-callout-metadata="orange"] {
--timeline-dot-color: var(--color-orange);
}
[data-callout-metadata="yellow"] {
--timeline-dot-color: var(--color-yellow);
}
[data-callout-metadata="green"] {
--timeline-dot-color: var(--color-green);
}
[data-callout-metadata="cyan"] {
--timeline-dot-color: var(--color-cyan);
}
[data-callout-metadata="blue"] {
--timeline-dot-color: var(--color-blue);
}
[data-callout-metadata="purple"] {
--timeline-dot-color: var(--color-purple);
}
[data-callout-metadata="pink"] {
--timeline-dot-color: var(--color-pink);
}