op-packages/luci-app-fancontrol/htdocs/luci-static/resources/view/fancontrol.css

.fancontrol-runtime {
	margin-bottom: 1.5rem;
}

.fancontrol-status {
	width: 100%;
	max-width: 1200px;
	overflow: hidden;
	border: 1px solid rgba(127, 127, 127, .28);
	border-radius: 6px;
}

.fancontrol-status-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 0;
	padding: .4rem .7rem;
	background: rgba(127, 127, 127, .08);
	border-bottom: 1px solid rgba(127, 127, 127, .22);
}

.fancontrol-status-title {
	font-size: .88rem;
	font-weight: 600;
}

.fancontrol-metrics {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fancontrol-metric {
	min-width: 0;
	min-height: 0;
	padding: .55rem .7rem;
	border-right: 1px solid rgba(127, 127, 127, .2);
}

.fancontrol-metric:last-child {
	border-right: 0;
}

.fancontrol-metric-label,
.fancontrol-detail-label {
	display: block;
	color: var(--text-color-medium, inherit);
	font-size: .72rem;
}

.fancontrol-metric-reading {
	display: flex;
	align-items: baseline;
	gap: .3rem;
	min-height: 0;
	margin-top: .12rem;
	white-space: nowrap;
}

.fancontrol-metric-value {
	font-size: 1.18rem;
	font-weight: 600;
	line-height: 1.3;
}

.fancontrol-metric-unit {
	overflow: hidden;
	color: var(--text-color-medium, inherit);
	font-size: .72rem;
	text-overflow: ellipsis;
}

.fancontrol-chart-wrap {
	height: 72px;
	margin-top: .4rem;
}

.fancontrol-chart {
	display: block;
	width: 100%;
	height: 100%;
	color: var(--text-color-medium, #666);
	background: rgba(127, 127, 127, .025);
	border: 1px solid rgba(127, 127, 127, .24);
}

.fancontrol-chart-temperature {
	--fancontrol-chart-line: #c74b45;
	--fancontrol-chart-fill: rgba(199, 75, 69, .2);
}

.fancontrol-chart-pwm {
	--fancontrol-chart-line: #1976d2;
	--fancontrol-chart-fill: rgba(25, 118, 210, .2);
}

.fancontrol-chart-rpm {
	--fancontrol-chart-line: #2f8a57;
	--fancontrol-chart-fill: rgba(47, 138, 87, .2);
}

.fancontrol-details {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .3rem 1rem;
	padding: .42rem .7rem;
	background: rgba(127, 127, 127, .04);
	border-top: 1px solid rgba(127, 127, 127, .2);
}

.fancontrol-detail {
	display: grid;
	grid-template-columns: minmax(7rem, .34fr) minmax(0, 1fr);
	align-items: baseline;
	gap: .45rem;
	min-width: 0;
}

.fancontrol-detail-value {
	min-width: 0;
	overflow-wrap: anywhere;
}

.fancontrol-ok {
	color: var(--success-color-medium, #00884a);
}

@media (max-width: 700px) {
	.fancontrol-metrics {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.fancontrol-metric:nth-child(2) {
		border-right: 0;
	}

	.fancontrol-metric:last-child {
		grid-column: 1 / -1;
		border-top: 1px solid rgba(127, 127, 127, .2);
	}

	.fancontrol-details {
		grid-template-columns: 1fr;
	}

}

@media (max-width: 420px) {
	.fancontrol-metrics {
		grid-template-columns: 1fr;
	}

	.fancontrol-metric,
	.fancontrol-metric:nth-child(2) {
		border-right: 0;
		border-top: 1px solid rgba(127, 127, 127, .2);
	}

	.fancontrol-metric:first-child {
		border-top: 0;
	}

	.fancontrol-metric:last-child {
		grid-column: auto;
	}

	.fancontrol-detail {
		grid-template-columns: 1fr;
		gap: .15rem;
	}
}