main.css

/*
 * SPDX-FileCopyrightText: 2016 Nextcloud GmbH and Nextcloud contributors
 * SPDX-License-Identifier: AGPL-3.0-or-later
 */
/* settings.scss pins `.section h2` to 20px but leaves h3 at the 1.6em from
   core, so an unstyled subheading outgrows the heading above it. */
.section h3 {
	font-size: 18px;
}

.info {
	font-weight: bold;
}

.smallinfo {
	color: var(--color-text-maxcontrast);
}

.infobox {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	padding: 16px;
	margin: 16px 0;
	background-color: var(--color-main-background);
	border: 2px solid var(--color-border);
	border-radius: var(--border-radius-large);
}

@media (width <= 1280px) {
	.infobox {
		display: block;
		word-break: break-word;
	}
}

.infobox h3 {
	font-weight: bold;
	padding: 5px 0 10px 0;
	margin: 0;
	/* Names like ubuntu--vg-ubuntu--lv offer no break opportunity of their own */
	overflow-wrap: break-word;
}

.chart-container {
	position: relative;
	margin: 10px;
}

.clipboardButton {
	display: inline-block;
	position: relative;
	top: 2px;
	margin-left: 5px;
}

/* GRID SYSTEM */

/* auto-fit + minmax reflows on the container's own width, so the settings pane
   -- which is much narrower than the viewport -- no longer needs breakpoints. */
.row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: 30px;
}

/* Card lists: network interfaces, shares, disks. auto-fill rather than auto-fit
   keeps the empty tracks, so a host with a single interface gets one card rather
   than one band stretched across the whole pane. The track fits the widest card
   -- a disk, which puts a chart beside its stats -- so every list steps at the
   same width. */
.row--cards {
	grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
	margin: 16px 0;
}

/* The gap spaces the cards now; the stock margin would stack on top of it. */
.row--cards .infobox {
	margin: 0;
}

/* Stat tiles above the load and memory charts. */
.row--tiles {
	grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr));
	gap: 8px;
	margin: 16px 0;
}

/* Grid items are min-width:auto by default, so a long unbreakable value such as
   a device name would widen its track instead of wrapping. */
.row > * {
	min-width: 0;
}

.active-users-wrapper {
	flex: 1;
	display: flex;
	gap: 0 1rem;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

.active-users-box {
	padding: 0.25rem 1rem;
	flex: 1;
	min-width: 150px;
	border-left: 2px solid var(--color-border);
}

@media (width <= 1280px) {
	.active-users-box {
		padding: 1rem 0.5rem;
		border: none;
		text-align: center;
	}
}

.active-users-box:first-child {
	border: none;
}

.active-users-box .info {
	font-size: 2rem;
}

.smoothie-chart-tooltip {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	padding: 16px;
	margin: 0 0.25rem;
	background-color: var(--color-main-background);
	border: 2px solid var(--color-border);
	border-radius: var(--border-radius-large);
}

/* Core's reset sets `white-space: nowrap` on every table. A long value such as
   the CPU model then cannot wrap: the table grows past its column and prints
   over the section beside it. */
.server-info-table table {
	width: 100%;
	white-space: normal;
	overflow-wrap: break-word;
}

/* Core pads neither, so a header would otherwise sit flush against the edge
   while every row below it is indented. */
.server-info-table th,
.server-info-table td {
	padding: 6px;
	border-bottom: 1px solid var(--color-border);
}

.server-info-table th {
	color: var(--color-text-maxcontrast);
}

.server-info-table tr:last-child td {
	border-bottom: none;
}


.server-info__tag-wrapper {
	display: flex;
	flex-wrap: wrap;
}

.server-info__php-extension-tag {
	display: inline-block;
	margin: 2px;
	padding: 1px 9px;
	border-radius: 16px;
	border: 1px solid var(--color-main-text);
}