| .dw-timeline { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0; | |
| padding: var(--space-2) 0; | |
| padding-left: var(--space-4); | |
| } | |
| .dw-timeline__item { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-3); | |
| padding: var(--space-2) var(--space-3); | |
| border-left: 2px solid var(--color-border); | |
| margin-left: 90px; | |
| position: relative; | |
| } | |
| .dw-timeline__item::before { | |
| content: ""; | |
| position: absolute; | |
| left: -5px; | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: var(--color-border-strong); | |
| } | |
| .dw-timeline__item--success::before { | |
| background: var(--color-success); | |
| } | |
| .dw-timeline__item--warning::before { | |
| background: var(--color-warning); | |
| } | |
| .dw-timeline__item--danger::before { | |
| background: var(--color-danger); | |
| } | |
| .dw-timeline__time { | |
| position: absolute; | |
| left: -95px; | |
| width: 80px; | |
| text-align: right; | |
| font-size: 10px; | |
| font-family: var(--font-mono); | |
| color: var(--color-text-muted); | |
| } | |
| .dw-timeline__icon { | |
| flex-shrink: 0; | |
| font-size: var(--text-sm); | |
| } | |
| .dw-timeline__label { | |
| font-size: var(--text-sm); | |
| color: var(--color-text-primary); | |
| } | |