ESPEasy/static/espeasy_default.css

:root {
	--bg1: #eee;
	--bg2: #cacaca;
	--bg3: #07d;
	--c1: #fff;
	--bdc1: silver;
	--bg4: #e8e8e8;
	--bg5: #dbff0075;
	--c2: #444;
	--bg6: #fff;
	--c3: #000;
	--bg7: #bdbdbd;
	--bg8: #029b34;
	--c4: inherit;
	--c5: #07d;
	--bg10: #07d;
	--bg11: #f8f8f8;
	--c6: #fff;
	--ro: 0deg;
	--iv: 0;
	--tpm2: 140px;
}

[data-theme="dark"] {
	--bg1: #444;
	--bg2: #2e2e2e;
	--bg3: #00000085;
	--c1: #dfdfdf;
	--bdc1: #545454;
	--bg4: #2e2e2e;
	--bg5: #553044;
	--c2: #fff;
	--bg6: #222;
	--c3: #fff;
	--bg7: #00000030;
	--bg8: #30553d;
	--c4: #c3c3c3;
	--c5: #c3c3c3;
	--bg10: #44607a;
	--bg11: #44607a;
	--c6: #c3c3c3;
	--ro: 180deg;
	--iv: 1;
}

@media (prefers-color-scheme:dark) {
	[data-theme="auto"] {
		--bg1: #444;
		--bg2: #2e2e2e;
		--bg3: #00000085;
		--c1: #dfdfdf;
		--bdc1: #545454;
		--bg4: #2e2e2e;
		--bg5: #553044;
		--c2: #fff;
		--bg6: #222;
		--c3: #fff;
		--bg7: #00000030;
		--bg8: #30553d;
		--bg9: #222;
		--c4: #c3c3c3;
		--c5: #c3c3c3;
		--bg10: #44607a;
		--bg11: #44607a;
		--c6: #c3c3c3;
		--ro: 180deg;
		--iv: 1;
	}
}

* :not(font, a),
.closebtn,
.div_r,
h1,
h6,
.wide,
textarea {
	color: var(--c4)
}

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

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

.div_l,
.menu {
	float: left
}

.closebtn,
.div_r {
	float: right
}

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

h1 {
	font-size: 16pt;
	white-space: nowrap
}

h3 {
	background-color: var(--bg2);
	margin: -5px;
	padding: 6px
}

h6 {
	font-size: 10pt
}

pre {
	font: 1em monospace, monospace
}

.button {
	border: 0;
	border-radius: 5px;
	color: var(--c6);
	margin: 5px;
	padding: 5px 15px
}

input,
select,
.checkmark {
	background-color: var(--bg1)
}

.button.help,
.checkmark,
input,
select,
hr,
textarea,
#toastmessage,
.dotmark,
.logviewer {
	border: .1px solid gray;
}

input[disabled],
input[disabled]:hover {
	background-color: var(--bg7);
}

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

.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,
summary {
	margin: 4px;
	padding: 4px 8px
}

.wide {
	margin-bottom: 5px;
	max-width: 300px;
	min-width: 85px;
	width: 95%
}

textarea.wide {
	max-width: 1000px;
}

.xwide {
	width: 300px
}

.widenumber {
	max-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 {
	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 {
	background-color: var(--bg3)
}

.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
}

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

#toastmessage {
	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: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;
	height: 60vh
}

tbody {
	overflow: auto
}

.multirow th,
.normal th {
	background-color: #444;
	border-color: var(--bdc1);
	color: var(--c1);
	padding: 5px;
	width: 100vw
}

.multirow,
.normal {
	border-spacing: 0;
	width: 100%
}

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

.normal td {
	height: 30px
}

.multirow td {
	border-color: var(--bdc1);
	height: 30px;
	padding: 4px;
	text-align: center
}

.tworow td,
.tworow th {
	text-align: left
}

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

textarea,
.even tr:nth-child(2n),
.tworow tr:nth-child(4n+3),
.tworow tr:nth-child(4n+4) {
	background-color: var(--bg4)
}

.apheader,
.headermenu,
.headermenu2 {
	padding: 8px 12px;
	width: 100vw
}

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

.headermenu,
.headermenu2 {
	background-color: var(--bg11);
	position: fixed;
	top: 0;
	z-index: 1;
	box-shadow: 0 0 10px 1px rgb(0 0 0 / 30%)
}

.headermenu {
	height: 100px;
	border-bottom: .1px solid #444;
}

.headermenu2 {
	height: var(--tpm2);
}

.bodymenu {
	min-height: 100vh;
	padding-top: 100px
}

.bodymenu2 {
	min-height: 100vh;
	padding-top: var(--tpm2)
}

.menubar,
.menubar2 {
	display: flex;
	position: inherit;
	overflow-x: scroll;
	scrollbar-width: none
}

[class^="menubar"]::-webkit-scrollbar {
  display: none;
}

.menubar {
	top: 54px;
	max-width: 1180px;
}

.menubar2 {
	top: 99px;
	background: var(--bg2);
	width: 100vw;
	left: 0;
  border-block: .1px solid #222
}

a.menu {
	align-items: center;
	display: flex;
	height: 46px;
	justify-content: center;
	gap: 2px;
	width: 100%
}

.menubar2 a.menu {
	max-width: 70px;
	height: 41px;
	border-bottom: 0
}

.menu {
	color: var(--c2);
	border: solid transparent 1px;
	border-radius: 5px 5px 0 0;
	padding: 10px 10px 8px;
	white-space: nowrap
}

.menu.active {
	background-color: var(--bg6);
  border-color: #222;
	color: var(--c3);
	border-width: .1px
}

.menu:hover {
	background: var(--bg7);
	color: var(--c3)
}

.menu_button {
	display: none
}

.on {
	color: #029b34
}

.off {
	color: red
}

.div_r {
	background-color: var(--bg8);
	border-radius: 4px;
	margin: 2px;
	padding: 1px 10px
}

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

.highlight td {
	background-color: var(--bg5)
}

.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
}

summary {
	cursor: pointer;
}

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


body {
	background-color: var(--bg6)
}

.closebtn,
.div_r {
	color: var(--c6)
}

a,
h1,
h6 {
	color: var(--c5)
}

.button,
.container input:checked~.checkmark:not(.disabled),
.container2 input:checked~.dotmark {
	background-color: var(--bg10)
}

canvas {
	filter: invert(var(--iv)) hue-rotate(var(--ro));
}

.tc1 {
	width: 15vw;
}

@media screen and (max-width:1280px) {
	.tc1 {
		width: 25vw;
	}
}

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

	.menubar {
		width: 100%;
		max-width: 700px;
		left: 0
	}
}

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

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