ESPEasy/static/esp_auto.css

h1,
h6 {
	color: #07d
}

.checkmark:after,
.dotmark:after {
	content: '';
	display: none;
	position: absolute
}

.button,
.menu {
	text-decoration: none
}

.div_l,
.menu {
	float: left
}

.closebtn,
.div_r {
	color: #fff;
	float: right
}

* {
	box-sizing: border-box;
	font-family: sans-serif;
	font-size: 12pt;
	margin: 0
}

h1 {
	font-size: 16pt;
	margin: 8px 0
}

h3 {
	background-color: #cacaca;
	margin: -5px;
	padding: 6px
}

h6 {
	font-size: 10pt
}

code,
kbd,
pre,
samp,
tt,
xmp {
	font: 1em monospace, monospace
}

.button {
	background-color: #07d;
	border: 0;
	border-radius: 5px;
	color: #fff;
	margin: 4px;
	padding: 4px 16px
}

.button.help,
.checkmark,
input,
select,
textarea {
	border-color: gray;
	border-style: solid;
	border-width: 1px
}

.button.link.wide {
	display: inline-block;
	text-align: center;
	width: 100%
}

.button.link.red {
	background-color: red
}

.button.help {
	border-radius: 50%;
	font-family: monospace;
	padding: 2px 7px
}

.checkmark,
input,
select,
textarea {
	border-radius: 5px
}

.button:hover {
	background: #369
}

input,
select,
textarea {
	background-color: #eee;
	margin: 4px;
	padding: 4px 8px
}

.wide {
	margin-bottom: 5px;
	max-width: 350px;
	width: 95%
}

.xwide {
	width: 350px
}

.widenumber {
	max-width: 500px;
	width: 100px
}

.container,
.container2 {
	cursor: pointer;
	font-size: 12pt;
	padding-left: 35px
}

.container {
	display: block;
	height: 30px;
	margin-left: 4px;
	margin-top: 0;
	position: relative;
	user-select: none
}

.checkmark.disabled {
	background-color: grey
}

.checkmark {
	background-color: #eee;
	height: 25px;
	left: 0;
	position: absolute;
	top: 0;
	width: 25px
}

.container .checkmark:after {
	border: solid #fff;
	border-width: 0 3px 3px 0;
	height: 10px;
	left: 7px;
	top: 3px;
	transform: rotate(45deg);
	width: 5px
}

#toastmessage,
.dotmark,
.logviewer {
	border-color: gray;
	border-style: solid
}

#toastmessage,
.dotmark {
	border-width: 1px
}

.container2 {
	margin-bottom: 20px;
	margin-left: 9px;
	position: relative;
	user-select: none
}

.dotmark {
	background-color: #eee;
	border-radius: 50%;
	height: 26px;
	left: 0;
	position: absolute;
	top: 0;
	width: 26px
}

.container2 .dotmark:after {
	background: #fff;
	border-radius: 50%;
	height: 8px;
	left: 8px;
	top: 8px;
	width: 8px
}

.logviewer,
textarea {
	font-family: 'Lucida Console', Monaco, monospace;
	height: 60vh;
	width: -webkit-fill-available
}

#toastmessage {
	background-color: #07d;
	border-radius: 5px;
	bottom: 30%;
	color: #fff;
	font-size: 17px;
	left: 282px;
	margin-left: -125px;
	min-width: 250px;
	padding: 16px;
	position: fixed;
	text-align: center;
	visibility: hidden;
	z-index: 1
}

#toastmessage.show {
	animation: fadein .5s, fadeout .5s 2.5s;
	visibility: visible
}

.container input,
.container2 input {
	cursor: pointer;
	opacity: 0;
	position: absolute
}

.container input:checked~.checkmark,
.container2 input:checked~.dotmark {
	background-color: #07d
}

.container input:checked~.checkmark:after,
.container2,
.container2 input:checked~.dotmark:after {
	display: block
}

@keyframes fadein {
	from {
		bottom: 20%;
		opacity: 0
	}

	to {
		bottom: 30%;
		opacity: .9
	}
}

@keyframes fadeout {
	from {
		bottom: 30%;
		opacity: .9
	}

	to {
		bottom: 0;
		opacity: 0
	}
}

.level_0 {
	color: #f1f1f1
}

.level_1 {
	color: #fcff95
}

.level_2 {
	color: #9dcefe
}

.level_3 {
	color: #a4fc79
}

.level_4 {
	color: #f2ab39
}

.level_9 {
	color: #f50
}

.logviewer {
	background-color: #272727;
	color: #f1f1f1;
	overflow: auto
}

tbody {
	overflow: auto
}

.multirow th,
.normal th {
	background-color: #444;
	color: #fff;
	padding: 5px;
	width: 100vw
}

.multirow,
.normal {
	border-spacing: 0;
	border-style: none;
	min-width: 420px;
	padding-bottom: 5px;
	width: 100%
}

.multirow tr,
.normal td,
.normal tr {
	padding: 5px
}

.normal td {
	height: 30px
}

.multirow td {
	border-color: silver;
	height: 30px;
	padding: 4px;
	text-align: center
}

.multirow tr:nth-child(odd) {
	background-color: #e8e8e8
}

.sub {
	max-width: 100px;
	display: block
}

.highlight td {
	background-color: #dbff0075
}

.apheader,
.headermenu {
	background-color: #f8f8f8;
	padding: 8px 12px;
	width: 100vw
}

.note {
	color: #444;
	font-style: italic
}

.headermenu {
	border-bottom: .1px solid #444;
	height: 100px;
	position: fixed;
	top: 0;
	z-index: 1
}

.bodymenu {
	background-color: #fff;
	height: 100vh;
	padding-top: 100px
}

.menubar {
	position: inherit;
	top: 54px;
	width: 100%
}

a.menu {
	align-items: center;
	display: flex;
	height: 46px;
	justify-content: center
}

.menu {
	border: solid transparent 1px;
	border-radius: 5px 5px 0 0;
	color: #444;
	padding: 10px 10px 8px;
	white-space: nowrap
}

.menu.active {
	background-color: #fff;
	border-color: #444 #444 #fff;
	border-width: .1px;
	color: #000
}

.menu:hover {
	background: #bdbdbd;
	color: #000
}

.menu_button {
	display: none
}

.on {
	color: #029b34
}

.off {
	color: red
}

.div_r {
	background-color: #029b34;
	border-radius: 4px;
	margin: 2px;
	padding: 1px 10px
}

.alert,
.warning {
	color: #fff;
	margin-bottom: 15px;
	padding: 20px
}

.div_br {
	clear: both
}

.alert {
	background-color: #f44336
}

.warning {
	background-color: #ffca17
}

.closebtn {
	cursor: pointer;
	font-size: 22px;
	line-height: 20px;
	margin-left: 15px;
	transition: .3s
}

.closebtn:hover {
	color: #000
}

section {
	overflow-x: auto;
	padding: 10px 0
}

footer {
	padding: 0 5px;
	word-break: break-all
}

@media screen and (max-width:780px) {
	.showmenulabel {
		display: none
	}

	a.menu {
		width: 12%
	}
}

@media screen and (max-width:450px) {
	.normal {
		min-width: 300px
	}

	input.wide:focus {
		left: 4px;
		position: absolute;
		z-index: 1
	}

	.container {
		display: inline;
		user-select: none
	}
}

@media (prefers-color-scheme:dark) {

	input,
	select {
		background-color: #444
	}

	h3 {
		background-color: #2e2e2e
	}

	.dotmark {
		background-color: #eee
	}

	.container2 .dotmark:after {
		background: #fff
	}

	#toastmessage {
		background-color: #00000085;
		color: #fff
	}

	.multirow th,
	.normal th {
		background-color: #444;
		border-color: #545454;
		color: #dfdfdf
	}

	.multirow td {
		border-color: #545454
	}

	.multirow tr:nth-child(odd) {
		background-color: #2a2c2e
	}

	.highlight td {
		background-color: #553044
	}

	.note {
		color: #7b7b7b
	}

	.menu {
		background-color: transparent;
		color: #fff
	}

	.menu.active {
		background-color: #222;
		border-color: transparent;
		color: #fff
	}

	.menu:hover {
		background: #00000030;
		color: #fff
	}

	.div_r {
		background-color: #30553d
	}

	.alert,
	.warning {
		color: #fff
	}

	.closebtn:hover {
		color: #000
	}

	.apheader,
	.bodymenu,
	.checkmark,
	.multirow tr,
	.normal td,
	.normal tr,
	tbody,
	textarea {
		background-color: #222
	}

	*,
	.closebtn,
	.div_r,
	.textarea,
	h1,
	h6,
	.wide,
	textarea {
		color: #c3c3c3
	}

	.button,
	.container input:checked~.checkmark,
	.headermenu {
		background-color: #44607a
	}
}