starlight/docs/lunaria/styles.css

:root {
	--theme-accent: hsl(234, 100%, 87%);
	--theme-bg: hsl(223, 13%, 10%);
	--theme-table-header: hsl(222, 13%, 16%);
	--theme-table-hover: hsl(222, 13%, 16%);
	--theme-text: hsl(228, 8%, 77%);
	--theme-text-bright: hsl(0, 0%, 100%);
	--overlay-blurple: hsla(255, 60%, 60%, 0.2);

	--ln-color-background: linear-gradient(215deg, var(--overlay-blurple), transparent 40%),
		radial-gradient(var(--overlay-blurple), transparent 40%) no-repeat -60vw -40vh / 105vw 200vh,
		radial-gradient(var(--overlay-blurple), transparent 65%) no-repeat 50% calc(100% + 20rem) /
			60rem 30rem,
		var(--theme-bg);
	--ln-color-link: var(--theme-accent);
	--ln-color-black: var(--theme-text);
	--ln-color-done: var(--ln-color-blue);
	--ln-color-outdated: #ea580c;
	--ln-color-missing: var(--theme-text-bright);
	--ln-color-table-background: var(--theme-table-header);
	--ln-color-table-border: var(--theme-table-header);

	color-scheme: dark;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--theme-text-bright);
}

p a {
	text-decoration: underline;
}

.create-button {
	background-color: hsl(213deg 89% 64% / 20%);
	border-radius: 0.5em;
}

sup {
	display: flex;
	justify-content: center;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

translation-freshness {
	--freshness-color-bar-text: hsl(218, 35%, 14%);
	--freshness-color-up-to-date: var(--ln-color-done);
	--freshness-color-outdated-within: hsl(30, 100%, 75%);
	--freshness-color-outdated-beyond: var(--ln-color-outdated);
	--freshness-color-recent: hsl(265, 92%, 70%);

	display: block;

	form {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem;
		margin-bottom: 2rem;

		p {
			display: grid;
			gap: 0.5rem;
			grid-row: span 3;
			grid-template-rows: subgrid;
			margin: 0;
		}

		label {
			font-weight: bold;
		}

		small {
			color: var(--ln-color-black);
			font-size: 0.875rem;
		}

		input {
			background-color: var(--theme-table-header);
			border: 1px solid var(--ln-color-black);
			box-sizing: border-box;
			color: var(--theme-text-bright);
			padding: 0.5rem 0.75rem;
			width: 5rem;
		}

		button {
			background-color: color-mix(in hsl, var(--theme-accent) 10%, transparent);
			border: 1px solid currentColor;
			color: var(--theme-accent);
			font-size: 0.875rem;
			justify-self: start;
			padding: 0.75rem 1rem;

			&:hover {
				background-color: color-mix(in hsl, var(--theme-accent) 15%, transparent);
			}
		}
	}

	.freshness-up-to-date {
		background-color: var(--freshness-color-up-to-date);
	}

	.freshness-outdated-within {
		background-color: var(--freshness-color-outdated-within);
	}

	.freshness-outdated-beyond {
		background-color: var(--freshness-color-outdated-beyond);
	}

	.freshness-recent {
		background-color: var(--freshness-color-recent);
	}

	.freshness-legend,
	.freshness-chart-rows {
		list-style: none;
		padding: 0;
	}

	.freshness-legend {
		display: flex;
		flex-wrap: wrap;
		font-weight: bold;
		gap: 0.75rem 1rem;

		li {
			align-items: center;
			display: flex;
			gap: 0.5rem;
		}

		span[aria-hidden] {
			border: 1px solid var(--ln-color-table-border);
			box-sizing: border-box;
			display: inline-block;
			height: 1rem;
			width: 1rem;
		}
	}

	.freshness-chart-header,
	.freshness-chart-row {
		display: grid;
		gap: 1.25rem;
		grid-template-columns: minmax(8rem, 1fr) minmax(0, 3fr);
	}

	.freshness-chart-header {
		color: var(--ln-color-black);
		font-size: 0.875rem;
		font-weight: bold;
		padding-block: 1.25rem 0.75rem;
	}

	.freshness-chart-row {
		align-items: center;
		border-bottom: 1px solid var(--ln-color-table-border);
		padding-block: 1rem;

		& > div {
			min-width: 0;
			overflow-wrap: anywhere;
		}

		p {
			color: var(--ln-color-black);
			margin-top: 0.5rem;
		}

		[data-locale-link] {
			font-weight: bold;
		}
	}

	.freshness-bar {
		background-color: var(--ln-color-table-background);
		display: flex;
		height: 2.125rem;
		overflow: hidden;

		& > span {
			align-items: center;
			color: var(--freshness-color-bar-text);
			display: flex;
			font-size: 0.8125rem;
			font-weight: bold;
			justify-content: center;
			min-width: min-content;
			padding-inline: 2px;

			&:empty {
				padding-inline: 0;
			}
		}

		& > span:not(:empty) ~ span:not(:empty) {
			border-inline-start: 1px solid var(--theme-bg);
		}
	}

	.freshness-activity {
		height: 1.5rem;
		margin-top: 1px;

		[data-activity-bar] {
			flex-shrink: 0;
		}

		[data-activity-percentage] {
			align-items: center;
			color: var(--theme-text-bright);
			display: flex;
			flex-shrink: 0;
			font-size: 0.8125rem;
			inset-inline-end: 0;
			margin: 0;
			padding-inline: 0.5rem;
			position: sticky;
			text-shadow:
				-1px 0 var(--theme-bg),
				1px 0 var(--theme-bg),
				0 -1px var(--theme-bg),
				0 1px var(--theme-bg);
		}
	}

	@media (max-width: 48rem) {
		.freshness-chart-header {
			display: none;
		}

		.freshness-chart-row {
			gap: 0.75rem;
			grid-template-columns: 1fr;
		}
	}

	table {
		border: 1px solid var(--ln-color-table-border);
		border-collapse: collapse;
		box-sizing: border-box;
		font-size: 0.8125rem;
		width: 100%;
	}

	th {
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
	}

	thead th {
		background-color: var(--ln-color-table-background);
		font-weight: bold;
		position: sticky;
		top: -1px;
		z-index: 1;
	}

	th,
	td {
		border: 1px solid var(--ln-color-table-border);
		padding: 0.3rem 1rem;
	}

	tbody tr:is(:hover, :focus-within) {
		background-color: var(--ln-color-table-background);
	}

	td time {
		display: flex;
		flex-wrap: wrap;
		gap: 0.25rem 1rem;

		span {
			white-space: nowrap;
		}

		[data-calendar-date] {
			margin-inline-start: auto;
		}
	}
}