77 lines
1.4 KiB
CSS
77 lines
1.4 KiB
CSS
.root {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--su-space-4);
|
|
list-style: none;
|
|
}
|
|
|
|
.item {
|
|
position: relative;
|
|
display: flex;
|
|
gap: var(--su-space-3);
|
|
}
|
|
|
|
/* 连接线：从标记下方连到下一条 */
|
|
.item:not(:last-child)::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 26px;
|
|
bottom: calc(-1 * var(--su-space-4));
|
|
left: 11px;
|
|
width: 1px;
|
|
background-color: var(--su-border);
|
|
}
|
|
|
|
.marker {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
border: 1px solid var(--su-border-strong);
|
|
border-radius: var(--su-radius-pill);
|
|
background-color: var(--su-bg-card);
|
|
font-size: var(--su-font-size-xs);
|
|
color: var(--su-text-muted);
|
|
}
|
|
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
padding-top: 2px;
|
|
}
|
|
|
|
.title {
|
|
font-size: var(--su-font-size-md);
|
|
line-height: var(--su-line-height-md);
|
|
color: var(--su-text-main);
|
|
}
|
|
|
|
.description {
|
|
font-size: var(--su-font-size-sm);
|
|
line-height: var(--su-line-height-sm);
|
|
color: var(--su-text-muted);
|
|
}
|
|
|
|
/* 已完成 */
|
|
.done .marker {
|
|
border-color: var(--su-color-primary);
|
|
background-color: var(--su-color-primary);
|
|
color: var(--su-white);
|
|
}
|
|
|
|
/* 进行中 */
|
|
.active .marker {
|
|
border-color: var(--su-color-primary);
|
|
color: var(--su-color-primary);
|
|
font-weight: var(--su-font-weight-bold);
|
|
}
|
|
|
|
.active .title {
|
|
font-weight: var(--su-font-weight-bold);
|
|
}
|