ProxmoxAAS-Dashboard/css/style.css

:root {
	--negative-color: #f00;
	--positive-color: #0f0;
	--highlight-color: yellow;
	--lightbg-text-color: black;
}

@media screen and (prefers-color-scheme: dark) {
	:root, :root.dark-theme {
		--main-bg-color: #404040;
		--main-text-color: white;
		--main-card-bg-color: #202020;
		--main-card-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 80%), 0 2px 10px 0 rgb(0 0 0 / 80%);
		--main-table-header-bg-color: black;
		--main-input-bg-color: #404040;
	}

	:root.light-theme {
		--main-bg-color: white;
		--main-text-color: black;
		--main-card-bg-color: white;
		--main-card-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%), 0 2px 10px 0 rgb(0 0 0 / 20%);
		--main-table-header-bg-color: #808080;
		--main-input-bg-color: white;
	}
}

@media screen and (prefers-color-scheme: light) {
	:root, :root.light-theme {
		--main-bg-color: white;
		--main-text-color: black;
		--main-card-bg-color: white;
		--main-card-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%), 0 2px 10px 0 rgb(0 0 0 / 20%);
		--main-table-header-bg-color: #808080;
		--main-input-bg-color: white;
	}

	:root.dark-theme {
		--main-bg-color: #404040;
		--main-text-color: white;
		--main-card-bg-color: #202020;
		--main-card-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 80%), 0 2px 10px 0 rgb(0 0 0 / 80%);
		--main-table-header-bg-color: black;
		--main-input-bg-color: #404040;
	}
}

html {
	box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6, p, a, label, button, input, select, td {
	font-family: monospace;
}

body {
	min-height: 100vh;
	max-width: 100vw;
	display: grid;
	grid-template-rows: auto 1fr;
}

main, dialog {
	max-width: 100vw;
	background-color: var(--main-bg-color);
	color: var(--main-text-color);
}

main {
	padding: 0 16px 16px;
}

.w3-card {
	background-color: var(--main-card-bg-color);
	box-shadow: var(--main-card-box-shadow);
}

.w3-card + .w3-card {
	margin-top: 16px;
}

th {
	background-color: var(--main-table-header-bg-color);
}

td {
	background-color: var(--main-card-bg-color);
}

input, select, textarea {
	background-color: var(--main-input-bg-color);
	color: var(--main-text-color);
}

img.clickable {
	cursor: pointer;
}

img {
	height: 1em;
	width: 1em;
}

hr, * {
	border-color: var(--main-text-color);
}

.flex {
	display: flex;
}

.row {
	flex-direction: row;
	column-gap: 10px;
	align-items: center;
}

.wrap {
	flex-wrap: wrap;
	row-gap: 10px;
}

.nowrap {
	flex-wrap: nowrap;
}

.hidden {
	visibility: hidden;
}

.none {
	display: none;
}

.spacer {
	min-height: 1em;
}

.w3-select, select {
	padding: 8px;
	appearance: none;
	appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E:root%7Bcolor:%23fff%7D@media (prefers-color-scheme:light)%7B:root%7Bcolor:%23000%7D%7D%3C/style%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.707 14.707a1 1 0 01-1.414 0l-5-5a1 1 0 011.414-1.414L12 12.586l4.293-4.293a1 1 0 111.414 1.414l-5 5z' fill='currentColor'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 8px top 50%;
	background-size: 1em auto;
}