cvm/src/scss/style.scss

$bodyBackgroundColor: rgb(228, 228, 228);
$menuBackgroundColor: rgb(0, 4, 36);
$submenuBackgroundColor: rgb(221, 221, 221);

body {
	background-color: $bodyBackgroundColor;
	margin: 0px;
	font-family: sans-serif;
}

.content {
	padding: 8px;
}

.form-section {

}

label {
	margin-right: 12px;
}

.menu {
	background-color: $menuBackgroundColor;

	h1, .menuItem {
		display: inline-block;
		color: white;
	}

	h1 {
		margin: 0px 16px;
	}

	.menuItem {
		a {
			color: white;
			text-decoration: none;
			padding: 15px 9px 5px 9px;
		}

		&.active {
			a {
				// background-color: rgb(228, 228, 228);
				/* FIXME: Make this lighter when there is no submenu, to match the page background color */
				background-color: $submenuBackgroundColor;
				color: black;
			}
		}

		&:not(.active) {
			a:hover {
				background-color: rgb(175, 175, 175);
				color: black;
			}
		}
	}
}

.fakeSubmenu, .submenu {
	background: linear-gradient(to bottom, $submenuBackgroundColor, $submenuBackgroundColor 60%, rgb(202, 204, 206));
}

.fakeSubmenu {
	height: 16px;
}

.submenu {
	padding: .3em .2em 0 .2em;
	border-bottom: 1px solid $menuBackgroundColor;

	.menuItem {
		display: inline-block;
		margin-bottom: -1px;
		padding: .3em .7em;
		font-size: .95em;

		a {
			text-decoration: none;
			color: black;
		}

		// background-color: red;

		&.active {
			background-color: $bodyBackgroundColor;
			border: 1px solid $menuBackgroundColor;
			border-bottom: none;
		}
	}
}

table {
	border-collapse: collapse;

	th, td {
		padding: 6px 9px;
		border: 1px solid black;
	}

	th {
		text-align: left;
	}

	td.hidden {
		border: none;
	}
}

table.drives {
	td {
		vertical-align: top;
	}

	td.smart {
		&.HEALTHY {
			background-color: rgb(0, 165, 0);
		}

		&.DETERIORATING {
			background-color: rgb(255, 145, 0);
		}

		&.FAILING {
			background-color: rgb(230, 0, 0);
		}

		&.UNKNOWN {
			background-color: rgb(177, 177, 177);
		}
	}

	.hasPartitions, .partition:not(.last) {
		td:not(.smart) {
			border-bottom-color: transparent;
		}
	}

	.partition {
		font-style: italic;
		font-size: .8em;

		td {
			padding: 4px 9px;
		}

		.notMounted {
			color: gray;
		}
	}

	tr.smartStatus {
		font-size: .85em;

		td {
			padding: 4px 9px;
		}
	}

	th {
		&.healthy {
			color: rgb(0, 97, 0);
		}

		&.atRisk {
			color: rgb(124, 70, 0);
		}

		&.failing {
			color: rgb(194, 0, 0);
		}

		&.unknown {
			color: rgb(59, 59, 59);
		}
	}
}

.stacktrace, .debugPrint {
	white-space: pre-wrap;
	font-family: monospace;
	background-color: rgb(20, 20, 20);
	border: 1px solid black;
	padding: .8em;
	max-width: 1200px;
	color: white; // Default text color only
	
	.irrelevant {
		color: gray;
	}
}

.volumeGroup {
	max-width: 960px;
	display: grid;
	grid-template-columns: auto 1fr;

	align-items: center;
	gap: .2em .4em;
}

.bar {
	border: 1px solid black;
	display: grid;
}

.barSegment {
	box-sizing: border-box;
	font-size: .8em;
	background-color: rgb(205, 205, 205);
	padding: .3em .4em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;

	&:nth-child(even) {
		background-color: rgb(177, 177, 177);
	}
}