Webmin dark theme by rhh3591

/* ==UserStyle==
@name           Solar Assistant
@namespace      github.com/openstyles/stylus
@version        1.1.0
@description    Solar Assistant
@author         Roland
==/UserStyle== */
@-moz-document domain("raspi-sdhc-solarassistant.lan"),
domain("solar-assistant.io") {

	/*********
	Typography 
	**********/
	html,
	body,
	.main-view,
	.scrollbar-view,
	.accent-block,
	.accent-content {
		background: var(--rhh-color-bg-main);
		background-color: var(--rhh-color-bg-main);
		color: var(--rhh-color-text);
	}
	body {
		font-size: 8pt;
		line-height: 1.5;
	}

	.card,
	.display-label,
	img,
	.options {
		background: var(--rhh-color-bg-nav);
		background-color: var(--rhh-color-bg-nav);
		color: var(--rhh-color-text);
	}

	.header {
		background: linear-gradient(30deg, #fc6, #fa5, #f84, #843, #622, #512, #401, #301, #200, #100, #000);
	}
	.header .container .menu .header .container .logo {
		height: 60px;
		margin-top: 0;
		margin-bottom: 50px;
	}
	.header .container .menu .header .container .menu {
		background-color: transparent;
	}
	.header .container .menu .menu-item {
		background-color: hsl(0 10% 10% / 0.7);
		/* semi-transparent */
		border: 1px solid rgba(255, 255, 255, 0.1);
		border-bottom: none;
		border-radius: 5px 5px 0 0;
		padding: 10px 20px;
	}
	.header .container .menu .menu-item.active {
		background: var(--rhh-color-bg-main) !important;
		background-color: var(--rhh-color-bg-main) !important;
		border-radius: 5px 5px 0 0;
	}

	a:not(.graph-legend-alias),
	a.menu-item,
	a.menu-item .item-img,
	a.menu-item .item-caption,
	a.status,
	a.status:visited {
		color: var(--rhh-color-link);
	}
	a.menu-item .item-img {
		background-color: var(--rhh-color-link);
		padding: 1px;
	}

	.status,
	a.status,
	a.status:visited {
		display: flex;
		align-items: center !important;
		justify-content: center !important;
		width: 20vw;
	}
	.status img,
	a.status:visited img,
	a.status img {
		background: var(--rhh-color-bg-input);
		background-color: var(--rhh-color-bg-input);
		border: none !important;
		margin: 15px;
		padding: 0;
	}
	.status > div,
	a.status:visited > div,
	a.status > div {
		margin-left: 0;
		padding: 0;
		align-items: center !important;
		justify-content: center !important;
		width: 100% !important;
	}
	.status > div .value {
		color: var(--rhh-color-text) !important;
	}
	.status > div .value,
	a.status:visited > div .value,
	a.status > div .value {
		line-height: 1.5 !important;
	}
	.status > div .value.small {
		font-size: 8pt;
		width: 100% !important;
	}

	a:hover,
	a.status:hover,
	a.status:hover img,
	a.button:hover,
	a.ghost-button:hover,
	a.pointer:hover,
	a.menu-item .item-img:hover,
	a.menu-item .item-caption:hover,
	.options:hover {
		background: var(--rhh-color-bg-input) !important;
		background-color: var(--rhh-color-bg-input) !important;
		color: var(--rhh-color-hover) !important;
		border: none !important;
		text-decoration: none !important;
	}
	a.status {
		border: 1px solid transparent !important;
	}
	a.status:hover {
		border: 1px dashed var(--rhh-color-link) !important;
	}
	button,
	button span,
	.button-group,
	.button-group button,
	.button-group .button,
	.button-group div,
	.button-group div span,
	.toolbar-button,
	a.button,
	a.ghost-button {
		background: var(--rhh-color-bg-button) !important;
		background-color: var(--rhh-color-bg-button) !important;
		color: var(--rhh-color-button) !important;
		border-color: var(--rhh-color-border);
		padding: 0;
	}
	a.button,
	a.ghost-button {
		padding: 5px 10px !important;
	}
	span.positive {
		color: var(--rhh-color-value-positive) !important;
	}
	span.negative {
		color: var(--rhh-color-value-negative) !important;
	}

	.options .active {
		color: var(--rhh-color-input);
		background-color: var(--rhh-color-bg-input);
	}

	.page-toolbar {
		background-color: var(--rhh-color-bg-main);
		border-color: var(--rhh-color-border);
	}

	.panel-title-text {
		color: var(--rhh-color-heading);
	}

	table,
	table.striped,
	table.border,
	table.border thead,
	td,
	.accent-block {
		background-color: var(--rhh-color-bg-main);
		color: var(--rhh-color-text);
	}

	table,
	table.striped,
	table.border,
	table.border thead,
	td,
	.accent-block,
	.border,
	.dashboard,
	.panel-container {
		border: none;
	}

	.card,
	.automation .card-section,
	.card .card-section:not(:first-child),
	.card-section {
		border: none;
		border-top: 1px solid var(--rhh-color-border);
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	.status .label {
		color: var(--rhh-color-heading);
	}

	input,
	input[type="email"],
	input[type="number"],
	input[type="password"],
	input[type="text"],
	select,
	textarea {
		background-color: var(--rhh-color-bg-input);
		color: var(--rhh-color-input);
		border: 1px solid var(--rhh-color-border);
	}
	.metric-value input.setting-input {
		width: 8em !important;
	}

	div.form-field div {
		color: var(--rhh-color-text);
	}

	/***** 
	Layout 
	******/
	.flex.stretch > div .card {
		height: 100%;
		width: 100%;
	}

	.dashboard .dashboard-column {
		background-color: var(--rhh-color-bg-input);
		border-top: 1px solid var(--rhh-color-border);
		margin: 0;
		padding: 0;
	}
	.dashboard .card .card-section .half,
	.flex .dashboard-column .half {
		display: flex;
		flex-basis: 20%;
		height: fit-content !important;
	}
	.dashboard .dashboard-column:nth-child(1) {
		flex-basis: 100%;
	}
	.dashboard .dashboard-column:nth-child(2) {
		flex-basis: 50%;
		height: 42vh !important;
	}
	.dashboard .dashboard-column:nth-child(3) {
		flex-basis: 50%;
	}
	.dashboard .dashboard-column:nth-child(1) .card-section {
		height: 15vh !important;
		width: 100% !important;
		min-width: 20rem;
	}
	.dashboard .dashboard-column:nth-child(2) .card .iframe-overview {
		height: 40vh;
	}
	.dashboard .dashboard-column:nth-child(3) .card .iframe-battery-power,
	.dashboard .dashboard-column:nth-child(3) .card .iframe-battery-soc {
		display: flex;
		height: 20vh !important;
		min-height: 20vh;
		width: 100%;
	}
	.dashboard .dashboard-column .card-section {
		margin: 0;
		padding: 0;
	}
	.dashboard .dashboard-column:nth-child(1) .card-section:nth-child(2) .half .gauge .value {
		color: var(--rhh-color-value-positive) !important;
		top: 6vh;
	}
	.dashboard .dashboard-column:nth-child(1) .card-section:nth-child(2) .half .gauge .label {
		top: 8vh;
	}

	.panel-wrapper,
	.panel-container {
		background-color: var(--rhh-color-bg-input);
	}

	canvas.flot-base {
		background-color: var(--rhh-color-bg-graph);
	}

	div.flot-text {
		color: var(--rhh-color-text);
	}

	.gauge {
		margin: 2em 5em 2em 5em;
		padding: 2em;
		width: 20em;
		height: 20em;
	}
	.gauge .mask,
	.gauge .semi-circle,
	.gauge .semi-circle::before {
		background: #000;
		line-height: 1;
	}
	.gauge .semi-circle {
		height: 5.75em;
	}
	.gauge .semi-circle--mask::before {
		background: var(--rhh-color-bg-graph);
	}
	.gauge .semi-circle.blue {
		background: #40f;
	}
	.gauge .semi-circle.red {
		background: #f40;
	}
	.gauge .semi-circle.yellow {
		background: #fc0;
	}
	.gauge .semi-circle.green {
		background: #4f0;
	}
	.gauge .value,
	.gauge .label {
		font-weight: bold;
	}
	.gauge .label {
		bottom: 30px;
	}
	.display-value,
	.metric-value {
		color: var(--rhh-color-value-positive) !important;
		bottom: 60px;
	}
}

@-moz-document url("http://raspi-sdhc-solarassistant.lan/totals"),
url("https://flr.au.solar-assistant.io/totals") {

	.half .card .card-section div {
		width: 100%;
	}
	.half .card .card-section div:nth-child(0),
	.half .card .card-section div:nth-child(2) {
		height: fit-content !important;
		overflow-y: auto;
	}
	.half .card .card-section div#daily-totals-chart,
	.half .card .card-section div#weekly-totals-chart {
		height: 400px;
		overflow-y: hidden;
	}
}

@-moz-document url("http://raspi-sdhc-solarassistant.lan/inverter"),
url("https://flr.au.solar-assistant.io/inverter/inverter") {

	metric-value .display-label {
		background-color: var(--rhh-color-bg-input);
		color: var(--rhh-color-input);
	}
}