|$ curl https://forge-ai.dev/api/markdown?path=docs/components/timeline

$cat docs/timeline.md

updated Recently·13 min read·published

Timeline

◆CSS◆HTML◆UI◆Data Display◆Intermediate🎯Free Tools

Timelines visualize chronological sequences of events. They work for project histories, user activity feeds, changelogs, onboarding steps, and process flows. These examples cover vertical and horizontal layouts, alternating sides, status-aware nodes with icons, nested events, compact activity feeds, and rich content cards.

Vertical Timeline

A standard vertical timeline with a connecting line, dot indicators, and timestamps. Each item contains a title, description, and date. The connecting line uses a ::before pseudo-element on the container.

vertical-timeline

Live

untitled.html

HTML

1	<div class="tl">
2	<div class="tl-item">
3	<div class="tl-dot">
4	</div>
5	<div class="tl-content">
6	<span class="tl-date">
7	Jan 15, 2025
8	</span>
9	<h4 class="tl-title">
10	Project Kickoff
11	</h4>
12	<p class="tl-desc">
13	Initial meeting with stakeholders to define scope,
14	timeline, and resource allocation for Q1 deliverables.
15	</p>
16	</div>
17	</div>
18	<div class="tl-item">
19	<div class="tl-dot">
20	</div>
21	<div class="tl-content">
22	<span class="tl-date">
23	Feb 3, 2025
24	</span>
25	<h4 class="tl-title">
26	Design Review
27	</h4>
28	<p class="tl-desc">
29	Finalized UI/UX mockups and component library.
30	Received approval from the design team and product owner.
31	</p>
32	</div>
33	</div>
34	<div class="tl-item">
35	<div class="tl-dot">
36	</div>
37	<div class="tl-content">
38	<span class="tl-date">
39	Feb 20, 2025
40	</span>
41	<h4 class="tl-title">
42	Sprint 1 Complete
43	</h4>
44	<p class="tl-desc">
45	Shipped authentication, dashboard layout, and
46	settings page. 14 story points delivered across 3 features.
47	</p>
48	</div>
49	</div>
50	<div class="tl-item">
51	<div class="tl-dot active">
52	</div>
53	<div class="tl-content">
54	<span class="tl-date">
55	Mar 8, 2025
56	</span>
57	<h4 class="tl-title">
58	Sprint 2 In Progress
59	</h4>
60	<p class="tl-desc">
61	Currently building the notification system, real-time
62	collaboration, and data export functionality.
63	</p>
64	</div>
65	</div>
66	</div>

preview

Status Icons

Status-aware timeline nodes with colored icons — green check for completed, blue pulse for in-progress, yellow clock for pending, and red X for blocked. Visual status reduces cognitive load and communicates project health at a glance.

status-timeline

Live

untitled.html

HTML

1	<div class="tl status-tl">
2	<div class="tl-item">
3	<div class="tl-icon done">
4	<svg width="12" height="12" viewBox="0 0 24 24" fill="none"
5	stroke="currentColor" stroke-width="3" stroke-linecap="round"
6	stroke-linejoin="round">
7	<polyline points="20 6 9 17 4 12"/>
8	</svg>
9	</div>
10	<div class="tl-content">
11	<span class="tl-date">
12	Jan 15, 2025
13	</span>
14	<h4 class="tl-title">
15	Requirements Gathering
16	</h4>
17	<p class="tl-desc">
18	Stakeholder interviews, user research, and
19	competitive analysis completed across 12 segments.
20	</p>
21	</div>
22	</div>
23	<div class="tl-item">
24	<div class="tl-icon done">
25	<svg width="12" height="12" viewBox="0 0 24 24" fill="none"
26	stroke="currentColor" stroke-width="3" stroke-linecap="round"
27	stroke-linejoin="round">
28	<polyline points="20 6 9 17 4 12"/>
29	</svg>
30	</div>
31	<div class="tl-content">
32	<span class="tl-date">
33	Feb 1, 2025
34	</span>
35	<h4 class="tl-title">
36	Architecture Design
37	</h4>
38	<p class="tl-desc">
39	System architecture, database schema, and
40	API contracts finalized and reviewed.
41	</p>
42	</div>
43	</div>
44	<div class="tl-item">
45	<div class="tl-icon progress">
46	<svg width="12" height="12" viewBox="0 0 24 24" fill="none"
47	stroke="currentColor" stroke-width="3" stroke-linecap="round"
48	stroke-linejoin="round">
49	<circle cx="12" cy="12" r="10"/>
50	</svg>
51	</div>
52	<div class="tl-content">
53	<span class="tl-date">
54	Mar 1, 2025
55	</span>
56	<h4 class="tl-title">
57	Development Sprint
58	</h4>
59	<p class="tl-desc">
60	Core features being built. Frontend and backend
61	teams working in parallel on separate tracks.
62	</p>
63	</div>
64	</div>
65	<div class="tl-item">
66	<div class="tl-icon pending">
67	<svg width="12" height="12" viewBox="0 0 24 24" fill="none"
68	stroke="currentColor" stroke-width="3" stroke-linecap="round"
69	stroke-linejoin="round">
70	<circle cx="12" cy="12" r="10"/>
71	<line x1="12" y1="8" x2="12" y2="12"/>
72	<line x1="12" y1="16" x2="12.01" y2="16"/>
73	</svg>
74	</div>
75	<div class="tl-content">
76	<span class="tl-date">
77	Apr 1, 2025
78	</span>
79	<h4 class="tl-title">
80	QA & Testing
81	</h4>
82	<p class="tl-desc">
83	Manual and automated testing, performance
84	benchmarking, and security audit scheduled.
85	</p>
86	</div>
87	</div>
88	<div class="tl-item">
89	<div class="tl-icon blocked">
90	<svg width="12" height="12" viewBox="0 0 24 24" fill="none"
91	stroke="currentColor" stroke-width="3" stroke-linecap="round"
92	stroke-linejoin="round">
93	<circle cx="12" cy="12" r="10"/>
94	<line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/>
95	</svg>
96	</div>
97	<div class="tl-content">
98	<span class="tl-date">
99	May 1, 2025
100	</span>
101	<h4 class="tl-title">
102	Deployment
103	</h4>
104	<p class="tl-desc">
105	Staging deployment, UAT sign-off, and production
106	release pending environment configuration.
107	</p>
108	</div>
109	</div>
110	</div>

preview

Alternating Layout

Items alternate between left and right sides of a central line. This layout works well for wide screens and provides a balanced visual rhythm. Each side has a card with its own date, title, and description.

alternating-timeline

Live

untitled.html

HTML

1	<div class="alt-tl">
2	<div class="alt-item left">
3	<div class="alt-card">
4	<span class="tl-date">
5	Q1 2025
6	</span>
7	<h4 class="tl-title">
8	Research Phase
9	</h4>
10	<p class="tl-desc">
11	Market analysis, user interviews, and technical
12	feasibility studies across 12 customer segments.
13	</p>
14	</div>
15	</div>
16	<div class="alt-item right">
17	<div class="alt-card">
18	<span class="tl-date">
19	Q2 2025
20	</span>
21	<h4 class="tl-title">
22	Design Phase
23	</h4>
24	<p class="tl-desc">
25	Wireframes, prototypes, and design system creation.
26	Three design iterations with user testing.
27	</p>
28	</div>
29	</div>
30	<div class="alt-item left">
31	<div class="alt-card">
32	<span class="tl-date">
33	Q3 2025
34	</span>
35	<h4 class="tl-title">
36	Build Phase
37	</h4>
38	<p class="tl-desc">
39	Agile development with two-week sprints. 84 story
40	points delivered across 6 features in 4 sprints.
41	</p>
42	</div>
43	</div>
44	<div class="alt-item right">
45	<div class="alt-card">
46	<span class="tl-date">
47	Q4 2025
48	</span>
49	<h4 class="tl-title">
50	Launch Phase
51	</h4>
52	<p class="tl-desc">
53	Beta testing, performance optimization, documentation,
54	and zero-downtime production deployment.
55	</p>
56	</div>
57	</div>
58	</div>

preview

Horizontal Timeline

A horizontally scrolling timeline for roadmaps, project milestones, and historical events. Uses CSS overflow-x for scrolling on narrow screens. Each milestone has a date, title, and brief status description.

horizontal-timeline

Live

untitled.html

HTML

1	<div class="h-tl-wrap">
2	<div class="h-tl">
3	<div class="h-tl-item">
4	<div class="h-dot done">
5	</div>
6	<div class="h-card">
7	<span class="h-date">
8	Jan
9	</span>
10	<h4 class="h-title">
11	Planning
12	</h4>
13	<p class="h-desc">
14	Scope defined
15	</p>
16	</div>
17	</div>
18	<div class="h-tl-item">
19	<div class="h-dot done">
20	</div>
21	<div class="h-card">
22	<span class="h-date">
23	Feb
24	</span>
25	<h4 class="h-title">
26	Design
27	</h4>
28	<p class="h-desc">
29	Mockups ready
30	</p>
31	</div>
32	</div>
33	<div class="h-tl-item">
34	<div class="h-dot active">
35	</div>
36	<div class="h-card">
37	<span class="h-date">
38	Mar
39	</span>
40	<h4 class="h-title">
41	Development
42	</h4>
43	<p class="h-desc">
44	In progress
45	</p>
46	</div>
47	</div>
48	<div class="h-tl-item">
49	<div class="h-dot">
50	</div>
51	<div class="h-card">
52	<span class="h-date">
53	Apr
54	</span>
55	<h4 class="h-title">
56	Testing
57	</h4>
58	<p class="h-desc">
59	QA phase
60	</p>
61	</div>
62	</div>
63	<div class="h-tl-item">
64	<div class="h-dot">
65	</div>
66	<div class="h-card">
67	<span class="h-date">
68	May
69	</span>
70	<h4 class="h-title">
71	Launch
72	</h4>
73	<p class="h-desc">
74	Go live
75	</p>
76	</div>
77	</div>
78	</div>
79	</div>

preview

Compact Activity Feed

A dense, compact timeline for activity feeds, audit logs, and changelogs. Each item is a single line with timestamp, colored icon, and action description. Icons indicate action type — additions, modifications, errors, and removals.

compact-activity

Live

untitled.html

HTML

1	<div class="feed">
2	<div class="feed-item">
3	<span class="feed-time">
4	2m ago
5	</span>
6	<span class="feed-icon green">
7	+
8	</span>
9	<span class="feed-text">
10	<strong>
11	Sarah
12	</strong>
13	deployed
14	<code>
15	v2.4.1
16	</code>
17	to production
18	</span>
19	</div>
20	<div class="feed-item">
21	<span class="feed-time">
22	14m ago
23	</span>
24	<span class="feed-icon blue">
25	●
26	</span>
27	<span class="feed-text">
28	<strong>
29	Mike
30	</strong>
31	opened PR #847: Fix auth token refresh
32	</span>
33	</div>
34	<div class="feed-item">
35	<span class="feed-time">
36	32m ago
37	</span>
38	<span class="feed-icon yellow">
39	!
40	</span>
41	<span class="feed-text">
42	<strong>
43	CI
44	</strong>
45	build failed on
46	<code>
47	main
48	</code>
49	— lint errors
50	</span>
51	</div>
52	<div class="feed-item">
53	<span class="feed-time">
54	1h ago
55	</span>
56	<span class="feed-icon green">
57	+
58	</span>
59	<span class="feed-text">
60	<strong>
61	Alex
62	</strong>
63	merged PR #845: Add rate limiting middleware
64	</span>
65	</div>
66	<div class="feed-item">
67	<span class="feed-time">
68	2h ago
69	</span>
70	<span class="feed-icon purple">
71	✎
72	</span>
73	<span class="feed-text">
74	<strong>
75	Jordan
76	</strong>
77	updated API docs for v2 endpoints
78	</span>
79	</div>
80	<div class="feed-item">
81	<span class="feed-time">
82	3h ago
83	</span>
84	<span class="feed-icon red">
85	−
86	</span>
87	<span class="feed-text">
88	<strong>
89	Bot
90	</strong>
91	auto-closed stale issue #623 (30d inactivity)
92	</span>
93	</div>
94	<div class="feed-item">
95	<span class="feed-time">
96	5h ago
97	</span>
98	<span class="feed-icon blue">
99	●
100	</span>
101	<span class="feed-text">
102	<strong>
103	Emily
104	</strong>
105	started review on PR #842: DB migration
106	</span>
107	</div>
108	</div>

preview

Nested Events

Parent events can contain nested child events for sub-steps. This is useful for sprint retrospectives, release notes, or any hierarchical process where major milestones contain smaller tasks.

nested-timeline

Live

untitled.html

HTML

1	<div class="tl nested-tl">
2	<div class="tl-item">
3	<div class="tl-dot active">
4	</div>
5	<div class="tl-content">
6	<span class="tl-date">
7	Sprint 12 — Mar 1 to Mar 14
8	</span>
9	<h4 class="tl-title">
10	Authentication Overhaul
11	</h4>
12	<p class="tl-desc">
13	Complete redesign of the auth system with OAuth 2.0 and SAML support.
14	</p>
15	<div class="tl-nested">
16	<div class="tl-nested-item">
17	<span class="tl-nested-dot done">
18	</span>
19	<span class="tl-nested-text">
20	Implement OAuth 2.0 provider abstraction
21	</span>
22	</div>
23	<div class="tl-nested-item">
24	<span class="tl-nested-dot done">
25	</span>
26	<span class="tl-nested-text">
27	Add SAML integration for enterprise SSO
28	</span>
29	</div>
30	<div class="tl-nested-item">
31	<span class="tl-nested-dot active">
32	</span>
33	<span class="tl-nested-text">
34	Build session management dashboard
35	</span>
36	</div>
37	<div class="tl-nested-item">
38	<span class="tl-nested-dot pending">
39	</span>
40	<span class="tl-nested-text">
41	Write migration script for existing users
42	</span>
43	</div>
44	</div>
45	</div>
46	</div>
47	</div>

preview

HTML Structure

The vertical timeline uses a simple list structure with a pseudo-element line. Each item has a dot indicator and content block. The::before pseudo-element on the container draws the connecting line automatically — no extra DOM nodes needed.

timeline-structure.html

HTML

1	<div class="timeline">
2	<div class="timeline-item">
3	<div class="timeline-dot"></div>
4	<div class="timeline-content">
5	<span class="timeline-date">Mar 8, 2025</span>
6	<h4 class="timeline-title">Event Title</h4>
7	<p class="timeline-desc">
8	Description of what happened at this point.
9	</p>
10	</div>
11	</div>
12	<div class="timeline-item">
13	<div class="timeline-dot active"></div>
14	<div class="timeline-content">
15	<span class="timeline-date">Mar 15, 2025</span>
16	<h4 class="timeline-title">Next Event</h4>
17	<p class="timeline-desc">More details here.</p>
18	</div>
19	</div>
20	</div>

ℹ

info

For vertical timelines, use ::before pseudo-elements on the container to draw the connecting line. This avoids extra DOM nodes and keeps the HTML clean. Set position: relative on items and use absolute positioning for dots and icons.

⚠

warning

Horizontal timelines require careful handling on mobile. Useoverflow-x: auto on the wrapper and setmin-width on the track to prevent items from collapsing. Add a subtle scroll hint or CSS scroll-snap for touch devices.

Best Practices

Use semantic HTML — consider <ol> for sequential events to convey ordering.
Always show timestamps in a consistent format (relative or absolute, not both).
For status timelines, use distinct colors and icons — don't rely on color alone.
Keep timeline items scannable: short titles, brief descriptions, and clear dates.
On narrow screens, switch from alternating to single-side layout.
Use aria-label on timeline containers for screen reader context.
For long timelines, implement virtual scrolling or pagination to maintain performance.

X GitHub YouTube Instagram Facebook Discord Telegram Buy me a coffee Sponsor

1	.tl.status-tl {
2	position:relative;
3	padding:12px 24px 12px 44px;
4	font-family:system-ui,
5	sans-serif;
6	margin-left:12px
7	}
8	.tl.status-tl::before {
9	content:'';
10	position:absolute;
11	left:38px;
12	top:0;
13	bottom:0;
14	width:2px;
15	background:#2A2A2A
16	}
17	.tl-item {
18	position:relative;
19	display:flex;
20	padding:0 0 24px 0
21	}
22	.tl-item:last-child {
23	padding-bottom:0
24	}
25	.tl-icon {
26	position:absolute;
27	left:-26px;
28	top:4px;
29	width:24px;
30	height:24px;
31	border-radius:50%;
32	display:flex;
33	align-items:center;
34	justify-content:center;
35	z-index:1;
36	flex-shrink:0
37	}
38	.tl-icon.done {
39	background:rgba(34,
40	197,
41	94,
42	.15);
43	color:#22C55E;
44	border:2px solid rgba(34,
45	197,
46	94,
47	.3)
48	}
49	.tl-icon.progress {
50	background:rgba(59,
51	130,
52	246,
53	.15);
54	color:#3B82F6;
55	border:2px solid rgba(59,
56	130,
57	246,
58	.3);
59	animation:pulse-ring 2s infinite
60	}
61	.tl-icon.pending {
62	background:rgba(234,
63	179,
64	8,
65	.15);
66	color:#EAB308;
67	border:2px solid rgba(234,
68	179,
69	8,
70	.3)
71	}
72	.tl-icon.blocked {
73	background:rgba(239,
74	68,
75	68,
76	.15);
77	color:#EF4444;
78	border:2px solid rgba(239,
79	68,
80	68,
81	.3)
82	}
83	@keyframes pulse-ring {
84	0% {
85	box-shadow:0 0 0 0 rgba(59,
86	130,
87	246,
88	.4)
89	}
90	70% {
91	box-shadow:0 0 0 6px rgba(59,
92	130,
93	246,
94	0)
95	}
96	100% {
97	box-shadow:0 0 0 0 rgba(59,
98	130,
99	246,
100	0)
101	}
102	}
103	.tl-content {
104	flex:1;
105	padding-left:12px
106	}
107	.tl-date {
108	font-size:11px;
109	color:#666;
110	font-weight:500;
111	text-transform:uppercase;
112	letter-spacing:.3px
113	}
114	.tl-title {
115	font-size:13px;
116	font-weight:700;
117	color:#E0E0E0;
118	margin:4px 0 4px;
119	line-height:1.3
120	}
121	.tl-desc {
122	font-size:12px;
123	color:#808080;
124	line-height:1.6;
125	margin:0
126	}

1	.tl {
2	position:relative;
3	padding:12px 24px 12px 36px;
4	font-family:system-ui,
5	sans-serif;
6	margin-left:12px
7	}
8	.tl::before {
9	content:'';
10	position:absolute;
11	left:30px;
12	top:0;
13	bottom:0;
14	width:2px;
15	background:linear-gradient(to bottom,
16	#2A2A2A,
17	#2A2A2A 90%,
18	transparent)
19	}
20	.tl-item {
21	position:relative;
22	display:flex;
23	gap:0;
24	padding:0 0 28px 0
25	}
26	.tl-item:last-child {
27	padding-bottom:0
28	}
29	.tl-dot {
30	position:absolute;
31	left:-18px;
32	top:6px;
33	width:12px;
34	height:12px;
35	border-radius:50%;
36	border:2px solid #3A3A3A;
37	background:#0D0D0D;
38	z-index:1;
39	transition:all .2s
40	}
41	.tl-dot.active {
42	border-color:#00FF41;
43	background:#00FF41;
44	box-shadow:0 0 10px rgba(0,
45	255,
46	65,
47	.4)
48	}
49	.tl-content {
50	flex:1;
51	padding-left:12px
52	}
53	.tl-date {
54	font-size:11px;
55	color:#666;
56	font-weight:500;
57	text-transform:uppercase;
58	letter-spacing:.3px
59	}
60	.tl-title {
61	font-size:14px;
62	font-weight:700;
63	color:#E0E0E0;
64	margin:4px 0 4px;
65	line-height:1.3
66	}
67	.tl-desc {
68	font-size:12px;
69	color:#808080;
70	line-height:1.6;
71	margin:0
72	}

1	.alt-tl {
2	position:relative;
3	padding:20px 24px;
4	font-family:system-ui,
5	sans-serif;
6	max-width:600px;
7	margin:0 auto
8	}
9	.alt-tl::before {
10	content:'';
11	position:absolute;
12	left:50%;
13	top:0;
14	bottom:0;
15	width:2px;
16	background:#2A2A2A;
17	transform:translateX(-50%)
18	}
19	.alt-item {
20	position:relative;
21	width:50%;
22	padding:0 0 32px 0
23	}
24	.alt-item.left {
25	padding-right:36px;
26	text-align:right
27	}
28	.alt-item.right {
29	margin-left:50%;
30	padding-left:36px
31	}
32	.alt-item::before {
33	content:'';
34	position:absolute;
35	top:12px;
36	width:12px;
37	height:12px;
38	border-radius:50%;
39	background:#0D0D0D;
40	border:2px solid #00FF41;
41	z-index:1
42	}
43	.alt-item.left::before {
44	right:-6px
45	}
46	.alt-item.right::before {
47	left:-6px
48	}
49	.alt-card {
50	padding:12px 0
51	}
52	.tl-date {
53	font-size:11px;
54	color:#00FF41;
55	font-weight:600;
56	text-transform:uppercase;
57	letter-spacing:.5px
58	}
59	.tl-title {
60	font-size:14px;
61	font-weight:700;
62	color:#E0E0E0;
63	margin:4px 0;
64	line-height:1.3
65	}
66	.tl-desc {
67	font-size:12px;
68	color:#808080;
69	line-height:1.6;
70	margin:0
71	}

1	.h-tl-wrap {
2	padding:20px 24px;
3	overflow-x:auto;
4	font-family:system-ui,
5	sans-serif
6	}
7	.h-tl {
8	display:flex;
9	align-items:flex-start;
10	gap:0;
11	min-width:500px;
12	position:relative;
13	padding-top:20px
14	}
15	.h-tl::before {
16	content:'';
17	position:absolute;
18	top:26px;
19	left:0;
20	right:0;
21	height:2px;
22	background:#2A2A2A
23	}
24	.h-tl-item {
25	flex:1;
26	display:flex;
27	flex-direction:column;
28	align-items:center;
29	position:relative
30	}
31	.h-dot {
32	width:14px;
33	height:14px;
34	border-radius:50%;
35	background:#0D0D0D;
36	border:2px solid #3A3A3A;
37	z-index:1;
38	transition:all .2s;
39	margin-bottom:12px
40	}
41	.h-dot.done {
42	border-color:#22C55E;
43	background:#22C55E
44	}
45	.h-dot.active {
46	border-color:#00FF41;
47	background:#00FF41;
48	box-shadow:0 0 12px rgba(0,
49	255,
50	65,
51	.4)
52	}
53	.h-card {
54	text-align:center;
55	padding:0 8px
56	}
57	.h-date {
58	font-size:10px;
59	color:#666;
60	font-weight:600;
61	text-transform:uppercase;
62	letter-spacing:.5px
63	}
64	.h-title {
65	font-size:12px;
66	font-weight:700;
67	color:#E0E0E0;
68	margin:2px 0
69	}
70	.h-desc {
71	font-size:11px;
72	color:#808080;
73	margin:0
74	}

1	.feed {
2	padding:16px 24px;
3	font-family:system-ui,
4	sans-serif;
5	display:flex;
6	flex-direction:column
7	}
8	.feed-item {
9	display:flex;
10	align-items:center;
11	gap:12px;
12	padding:10px 12px;
13	border-radius:8px;
14	transition:background .15s;
15	font-size:12px;
16	border-bottom:1px solid #1A1A1A
17	}
18	.feed-item:last-child {
19	border-bottom:none
20	}
21	.feed-item:hover {
22	background:rgba(255,
23	255,
24	255,
25	.02)
26	}
27	.feed-time {
28	font-size:11px;
29	color:#555;
30	min-width:52px;
31	flex-shrink:0;
32	font-weight:500
33	}
34	.feed-icon {
35	width:22px;
36	height:22px;
37	border-radius:50%;
38	display:flex;
39	align-items:center;
40	justify-content:center;
41	font-size:11px;
42	font-weight:700;
43	flex-shrink:0
44	}
45	.feed-icon.green {
46	background:rgba(34,
47	197,
48	94,
49	.12);
50	color:#22C55E
51	}
52	.feed-icon.blue {
53	background:rgba(59,
54	130,
55	246,
56	.12);
57	color:#3B82F6
58	}
59	.feed-icon.yellow {
60	background:rgba(234,
61	179,
62	8,
63	.12);
64	color:#EAB308
65	}
66	.feed-icon.red {
67	background:rgba(239,
68	68,
69	68,
70	.12);
71	color:#EF4444
72	}
73	.feed-icon.purple {
74	background:rgba(168,
75	85,
76	247,
77	.12);
78	color:#A855F7
79	}
80	.feed-text {
81	color:#A0A0A0;
82	line-height:1.4
83	}
84	.feed-text strong {
85	color:#E0E0E0;
86	font-weight:600
87	}
88	.feed-text code {
89	font-family:monospace;
90	font-size:11px;
91	background:rgba(255,
92	255,
93	255,
94	.06);
95	padding:1px 5px;
96	border-radius:3px;
97	color:#00FF41
98	}

1	.tl.nested-tl {
2	position:relative;
3	padding:12px 24px 12px 36px;
4	font-family:system-ui,
5	sans-serif;
6	margin-left:12px
7	}
8	.tl.nested-tl::before {
9	content:'';
10	position:absolute;
11	left:30px;
12	top:0;
13	bottom:0;
14	width:2px;
15	background:#2A2A2A
16	}
17	.tl.nested-tl .tl-item {
18	position:relative;
19	display:flex;
20	padding:0 0 20px 0
21	}
22	.tl.nested-tl .tl-dot {
23	position:absolute;
24	left:-18px;
25	top:6px;
26	width:12px;
27	height:12px;
28	border-radius:50%;
29	border:2px solid #3A3A3A;
30	background:#0D0D0D;
31	z-index:1
32	}
33	.tl.nested-tl .tl-dot.active {
34	border-color:#00FF41;
35	background:#00FF41;
36	box-shadow:0 0 10px rgba(0,
37	255,
38	65,
39	.4)
40	}
41	.tl.nested-tl .tl-content {
42	flex:1;
43	padding-left:12px
44	}
45	.tl-date {
46	font-size:11px;
47	color:#666;
48	font-weight:500;
49	text-transform:uppercase;
50	letter-spacing:.3px
51	}
52	.tl-title {
53	font-size:14px;
54	font-weight:700;
55	color:#E0E0E0;
56	margin:4px 0;
57	line-height:1.3
58	}
59	.tl-desc {
60	font-size:12px;
61	color:#808080;
62	line-height:1.6;
63	margin:0 0 12px
64	}
65	.tl-nested {
66	display:flex;
67	flex-direction:column;
68	gap:8px;
69	padding:12px;
70	border-radius:8px;
71	background:rgba(255,
72	255,
73	255,
74	.02);
75	border:1px solid #222
76	}
77	.tl-nested-item {
78	display:flex;
79	align-items:center;
80	gap:10px;
81	font-size:12px;
82	color:#A0A0A0
83	}
84	.tl-nested-dot {
85	width:8px;
86	height:8px;
87	border-radius:50%;
88	flex-shrink:0;
89	border:1.5px solid #3A3A3A;
90	background:#0D0D0D
91	}
92	.tl-nested-dot.done {
93	border-color:#22C55E;
94	background:#22C55E
95	}
96	.tl-nested-dot.active {
97	border-color:#00FF41;
98	background:#00FF41
99	}
100	.tl-nested-dot.pending {
101	border-color:#EAB308;
102	background:transparent
103	}
104	.tl-nested-text {
105	line-height:1.4
106	}