Template:Year at a glance/styles.css

/* Template:Year at a glance/styles.css: the year-at-a-glance strip ({{Year at a glance}}).
   Each value cell carries three inline properties: --lw-yr-t (how far its lightness moves from the base, 0 to 0.2),
   --lw-yr-c (chroma) and --lw-yr-h (hue). The cell colour is built here, darker in light mode and lighter in dark
   mode, so one colour scale reads in both themes. The grid scrolls sideways inside itself with the row labels
   pinned left, so it stays readable at phone width. */
.lw-yr {
	background: #fff;
	color: #1f2a33;
	border: 1px solid #dde3e7;
	border-radius: 8px;
	margin: 0 0 1em;
	overflow: hidden;
	min-width: 0;
	font-size: 0.92em;
	line-height: 1.4;
}
/* With scripts, Common.js moves the strip to just before the end matter (See also, References …) and marks it
   lw-yr--placed; until then it is folded to nothing so the lead does not jump. If the script never arrives it
   shows where it stands after 12 s. (Not display: none, which would stop the animation from running.) */
html.client-js .lw-yr:not(.lw-yr--placed) {
	max-height: 0;
	margin: 0;
	border-width: 0;
	visibility: hidden;
	animation: lw-yr-late 0s 12s forwards;
}
@keyframes lw-yr-late {
	to {
		max-height: none;
		margin: 0 0 1em;
		border-width: 1px;
		visibility: visible;
	}
}

/* Title bar (also the collapse toggle's row) */
.lw-yr__bar {
	padding: 0.55em 0.9em;
	font-weight: 600;
}
.lw-yr__title {
	color: #2d6a4f;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.86em;
}
.lw-yr__computed {
	color: #5b6770;
	font-weight: 400;
	font-size: 0.86em;
}
.lw-yr .mw-collapsible-toggle {
	padding: 0.55em 0.9em 0 0;
	font-size: 0.86em;
}

/* Facts */
.lw-yr__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3em 1.6em;
	margin: 0;
	padding: 0.6em 0.9em;
	border-top: 1px solid #dde3e7;
	font-size: 0.92em;
}
.lw-yr__facts div {
	display: flex;
	flex-direction: column;
}
.lw-yr__facts dt {
	color: #5b6770;
	font-weight: 400;
	font-size: 0.8em;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0;
}
.lw-yr__facts dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
}
.lw-yr__muted {
	color: #5b6770;
}

/* Grid */
.lw-yr__scroll {
	overflow-x: auto;
	min-width: 0;
	border-top: 1px solid #dde3e7;
}
.lw-yr__table {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	min-width: 540px;
	margin: 0;
	font-size: 0.94em;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}
.lw-yr__head th {
	font-size: 0.82em;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #5b6770;
	padding: 0.7em 0 0.5em;
	text-align: center;
	background: #fff;
}
.lw-yr__table th[scope="row"],
.lw-yr__table .lw-yr__corner {
	position: sticky;
	left: 0;
	z-index: 1;
	background: #fff;
	text-align: left;
	font-weight: 600;
	line-height: 1.1;
	padding: 0.15em 0.5em 0.15em 0.8em;
	border-right: 1px solid #dde3e7;
	min-width: 5.6em;
	max-width: 6.2em;
}
.lw-yr__u {
	display: block;
	font-weight: 400;
	font-size: 0.78em;
	color: #5b6770;
}
.lw-yr__table td {
	text-align: center;
	color: #1c252c;
	height: 2em;
	padding: 0 1px;
	border-left: 1px solid #fff;
	border-top: 1px solid #fff;
	white-space: nowrap;
	background: oklch(calc(0.95 - var(--lw-yr-t, 0)) var(--lw-yr-c, 0) var(--lw-yr-h, 0));
}
.lw-yr__table tr.lw-yr__strong td {
	font-weight: 700;
	font-size: 1.06em;
	height: 2.2em;
}
.lw-yr__table td.lw-yr__na {
	color: #5b6770;
	font-weight: 400;
	background: #f3f5f6;
}
.lw-yr__table tr.lw-yr__grp th {
	position: sticky;
	left: 0;
	text-align: left;
	font-size: 0.74em;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #2d6a4f;
	padding: 0.9em 0.8em 0.4em;
	background: #fff;
}
.lw-yr__table td.lw-yr__band {
	padding: 6px 0;
	height: auto;
	font-size: 0;
	line-height: 0;
	background: transparent;
}
.lw-yr__b {
	display: inline-block;
	width: 33.333%;
	height: 18px;
	vertical-align: middle;
}
.lw-yr__b--plant {
	background: oklch(0.72 0.13 150);
}
.lw-yr__b--grow {
	background: oklch(0.86 0.07 140);
}
.lw-yr__b--harvest {
	background: oklch(0.7 0.15 60);
}
.lw-yr__b--none {
	background: oklch(0.93 0.006 235);
}

/* Key, note, sources */
.lw-yr__key {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.3em 1.2em;
	margin: 0;
	padding: 0.6em 0.9em 0;
	font-size: 0.86em;
	color: #5b6770;
}
.lw-yr__key li {
	display: flex;
	align-items: center;
	gap: 0.4em;
	margin: 0;
}
.lw-yr__key .lw-yr__b {
	width: 22px;
	height: 10px;
	border-radius: 2px;
}
.lw-yr__note,
.lw-yr__src {
	margin: 0;
	padding: 0.5em 0.9em 0;
	font-size: 0.86em;
	color: #5b6770;
}
.lw-yr__src {
	padding-bottom: 0.8em;
}
.lw-yr__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
@media (max-width: 480px) {
	.lw-yr__table {
		min-width: 520px;
	}
	.lw-yr__table th[scope="row"],
	.lw-yr__table .lw-yr__corner {
		min-width: 5.2em;
		padding: 0.15em 0.4em 0.15em 0.6em;
	}
}

/* Dark mode: Citizen's night theme, and its automatic theme when the system is dark */
html.skin-theme-clientpref-night .lw-yr {
	background: #1d2329;
	color: #e7ecef;
	border-color: #34404a;
}
html.skin-theme-clientpref-night .lw-yr__title,
html.skin-theme-clientpref-night .lw-yr__table tr.lw-yr__grp th {
	color: #7cc4a0;
}
html.skin-theme-clientpref-night .lw-yr__computed,
html.skin-theme-clientpref-night .lw-yr__facts dt,
html.skin-theme-clientpref-night .lw-yr__muted,
html.skin-theme-clientpref-night .lw-yr__u,
html.skin-theme-clientpref-night .lw-yr__key,
html.skin-theme-clientpref-night .lw-yr__note,
html.skin-theme-clientpref-night .lw-yr__src {
	color: #a3afb7;
}
html.skin-theme-clientpref-night .lw-yr__facts,
html.skin-theme-clientpref-night .lw-yr__scroll {
	border-top-color: #34404a;
}
html.skin-theme-clientpref-night .lw-yr__head th,
html.skin-theme-clientpref-night .lw-yr__table th[scope="row"],
html.skin-theme-clientpref-night .lw-yr__table .lw-yr__corner,
html.skin-theme-clientpref-night .lw-yr__table tr.lw-yr__grp th {
	background: #1d2329;
}
html.skin-theme-clientpref-night .lw-yr__head th {
	color: #a3afb7;
}
html.skin-theme-clientpref-night .lw-yr__table th[scope="row"],
html.skin-theme-clientpref-night .lw-yr__table .lw-yr__corner {
	border-right-color: #34404a;
}
html.skin-theme-clientpref-night .lw-yr__table td {
	color: #f2f5f7;
	border-left-color: #1d2329;
	border-top-color: #1d2329;
	background: oklch(calc(0.27 + var(--lw-yr-t, 0)) var(--lw-yr-c, 0) var(--lw-yr-h, 0));
}
html.skin-theme-clientpref-night .lw-yr__table td.lw-yr__na {
	color: #a3afb7;
	background: #262e35;
}
html.skin-theme-clientpref-night .lw-yr__table td.lw-yr__band {
	background: transparent;
}
html.skin-theme-clientpref-night .lw-yr__b--plant {
	background: oklch(0.62 0.13 150);
}
html.skin-theme-clientpref-night .lw-yr__b--grow {
	background: oklch(0.42 0.07 145);
}
html.skin-theme-clientpref-night .lw-yr__b--harvest {
	background: oklch(0.68 0.14 60);
}
html.skin-theme-clientpref-night .lw-yr__b--none {
	background: oklch(0.28 0.012 240);
}
@media (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .lw-yr {
		background: #1d2329;
		color: #e7ecef;
		border-color: #34404a;
	}
	html.skin-theme-clientpref-os .lw-yr__title,
	html.skin-theme-clientpref-os .lw-yr__table tr.lw-yr__grp th {
		color: #7cc4a0;
	}
	html.skin-theme-clientpref-os .lw-yr__computed,
	html.skin-theme-clientpref-os .lw-yr__facts dt,
	html.skin-theme-clientpref-os .lw-yr__muted,
	html.skin-theme-clientpref-os .lw-yr__u,
	html.skin-theme-clientpref-os .lw-yr__key,
	html.skin-theme-clientpref-os .lw-yr__note,
	html.skin-theme-clientpref-os .lw-yr__src {
		color: #a3afb7;
	}
	html.skin-theme-clientpref-os .lw-yr__facts,
	html.skin-theme-clientpref-os .lw-yr__scroll {
		border-top-color: #34404a;
	}
	html.skin-theme-clientpref-os .lw-yr__head th,
	html.skin-theme-clientpref-os .lw-yr__table th[scope="row"],
	html.skin-theme-clientpref-os .lw-yr__table .lw-yr__corner,
	html.skin-theme-clientpref-os .lw-yr__table tr.lw-yr__grp th {
		background: #1d2329;
	}
	html.skin-theme-clientpref-os .lw-yr__head th {
		color: #a3afb7;
	}
	html.skin-theme-clientpref-os .lw-yr__table th[scope="row"],
	html.skin-theme-clientpref-os .lw-yr__table .lw-yr__corner {
		border-right-color: #34404a;
	}
	html.skin-theme-clientpref-os .lw-yr__table td {
		color: #f2f5f7;
		border-left-color: #1d2329;
		border-top-color: #1d2329;
		background: oklch(calc(0.27 + var(--lw-yr-t, 0)) var(--lw-yr-c, 0) var(--lw-yr-h, 0));
	}
	html.skin-theme-clientpref-os .lw-yr__table td.lw-yr__na {
		color: #a3afb7;
		background: #262e35;
	}
	html.skin-theme-clientpref-os .lw-yr__table td.lw-yr__band {
		background: transparent;
	}
	html.skin-theme-clientpref-os .lw-yr__b--plant {
		background: oklch(0.62 0.13 150);
	}
	html.skin-theme-clientpref-os .lw-yr__b--grow {
		background: oklch(0.42 0.07 145);
	}
	html.skin-theme-clientpref-os .lw-yr__b--harvest {
		background: oklch(0.68 0.14 60);
	}
	html.skin-theme-clientpref-os .lw-yr__b--none {
		background: oklch(0.28 0.012 240);
	}
}