Solar Assistant dark theme by rhh3591

/* ==UserStyle==
@name           Solar Assistant dark theme
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Solar Assistant dark theme
@author         Roland
==/UserStyle== */
@-moz-document domain("raspi-sdhc-solarassistant.lan") {

	html,
	body,
	.main-view,
	.scrollbar-view,
	.accent-block {
		background: var(--rhh-color-bg-main);
		background-color: var(--rhh-color-bg-main);
		color: var(--rhh-color-text);
	}

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

	body {
		font-size: 8pt;
		line-height: 1.5;
	}

	.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);
		border: none;
		border-radius: 15px 5px 0 0;
		padding: 10px 20px 5px 15px;
	}

	.header .container .menu a.active {
		background: var(--rhh-color-bg-main) !important;
		background-color: var(--rhh-color-bg-main) !important;
	}

	.dashboard .card .card-section .half,
	.flex .dashboard-column .half {
		flex-basis: 50%;
	}

	.status > div,
	a.status:visited > div,
	a.status > div {
		margin-left: 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 > img,
	a.status:visited > img,
	a.status > img {
		background: var(--rhh-color-bg-input);
		background-color: var(--rhh-color-bg-input);
		border: none;
	}
	.status,
	a.status:visited > div,
	a.status > div {
		padding: 0;
		width: 20em;
	}
	.status > div .value,
	a.status:visited > div .value,
	a.status > div .value {
		line-height: 1.5;
	}
	.status > div .value.small {
		font-size: 8pt;
	}
	a:hover,
	a.status:hover,
	a.button:hover,
	a.ghost-button:hover,
	a.pointer:hover,
	a.menu-item .item-img:hover,
	a.menu-item .item-caption:hover,
	a *:hover {
		background: var(--rhh-color-bg-input) !important;
		background-color: var(--rhh-color-bg-input) !important;
		color: var(--rhh-color-hover) !important;
		text-decoration: none !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;
	}

	.flex.stretch > div .card {
		height: 100%;
	}

	.dashboard .dashboard-column {
		background-color: var(--rhh-color-bg-input);
		flex-basis: 33%;
		padding-bottom: 10px;
	}

	.dashboard .dashboard-column .card .iframe-overview {
		height: 100%;
		min-height: 60vh;
	}

	.dashboard .dashboard-column > .card .iframe-battery-power,
	.dashboard .dashboard-column > .card .iframe-battery-soc {
		display: flex;
		flex-basis: 100%;
	}

	.dashboard .dashboard-column .card .iframe-battery-power,
	.dashboard .dashboard-column .card .iframe-battery-soc {
		display: flex;
		height: 50%;
		min-height: 30vh;
	}

	.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 {
		height: 10em;
		margin: 2em 5em 0 5em;
		padding: 2em;
	}

	.gauge .mask,
	.gauge .semi-circle,
	.gauge .semi-circle::before {
		background: #000;
		line-height: 0;
	}

	.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 {
		background-color: transparent;
		font-weight: bold;
	}

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

	.gauge .label {
		bottom: 35px;
	}

	.gauge .value,
	.display-value,
	.metric-value,
	.options .active {
		color: var(--rhh-color-input);
		bottom: 60px;
	}

	.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 {
		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);
	}
}

@-moz-document url("http://raspi-sdhc-solarassistant.lan/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") {

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