Module:Timeline/styles.css

/*
 * Based on the implementation from User:Merri
 * https://codepen.io/Merri/pen/YzbQJXp
 */

.template-timeline {
	--template-timeline-height: 1rem;
	position: relative;
	display: flex;
	margin: 1rem 0;
}

.template-timeline::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	border: var(--tg-border-base);
	border-radius: var(--tg-border-radius-small);
	height: var(--template-timeline-height);
	background-color: var(--tg-color-surface-2);
}

.template-timeline-section {
	position: relative;
	flex: var(--template-timeline-length);
}

.template-timeline-section-label {
	margin-top: var(--template-timeline-height);
	border-left: var(--tg-border-base);
	padding: 0.75rem 0.5rem 0 0.5rem;
	font-size: var(--tg-font-size-x-small);
	white-space: nowrap;
}

.template-timeline-section-label-long {
	display: none;
}

.template-timeline-period {
	--template-timeline-start-uncertain: var(--template-timeline-start);
	--template-timeline-end-uncertain: var(--template-timeline-end);
	--template-timeline-total-length: calc(
		var(--template-timeline-end) - var(--template-timeline-start)
	);
	--template-timeline-background: linear-gradient(
		90deg,
		transparent 0%,
		var(--template-timeline-color)
			calc(
				(
						var(--template-timeline-start-uncertain) -
							var(--template-timeline-start)
					) / var(--template-timeline-total-length) * 100%
			),
		var(--template-timeline-color)
			calc(
				(
						var(--template-timeline-end-uncertain) -
							var(--template-timeline-start)
					) / var(--template-timeline-total-length) * 100%
			),
		transparent
			calc(
				(var(--template-timeline-end) - var(--template-timeline-start)) /
					var(--template-timeline-total-length) * 100%
			)
	);
	--template-timeline-start-position: calc(
		var(--template-timeline-start) / var(--template-timeline-length) * 100%
	);
	--template-timeline-end-position: calc(
		(var(--template-timeline-length) - var(--template-timeline-end)) /
			var(--template-timeline-length) * 100%
	);
	position: absolute;
	top: 0;
	height: var(--template-timeline-height);
	left: var(--template-timeline-start-position);
	right: var(--template-timeline-end-position);
	min-width: 1px; /* Make sure that it is always visible */
	background-image: var(--template-timeline-background);
}

/* FloatingUI styles */
.template-timeline-tooltip-title {
	color: var(--color-emphasized);
	font-weight: var(--font-weight-semi-bold);
}

.template-timeline-tooltip-desc {
	color: var(--color-subtle);
}

.template-timeline-period.ext-floatingui-reference[aria-details='ext-floatingui-floating'] {
	transform: scaleY(1.2);
}

@media screen and (min-width: 1120px) {
	.template-timeline-section-label-short {
		display: none;
	}

	.template-timeline-section-label-long {
		display: block;
	}
}