iotstyle.css

:root {
  --color: #111111;
  --back: #c2c3c5;
  --card-back: white;
  --card-head: hsl(220, 20%, 85%);
  --card-head-active: hsl(220, 80%, 70%);
  --focus: hsl(220, 50%, 50%);
  --code: rgb(255 255 185);
  --sidebar-width: 200px;
  --content-width: 800px;
  --layout-gap: 0.5em;
  --doc-body-width: calc(var(--content-width) + var(--sidebar-width) + 2 * var(--layout-gap));
  --content-back: #f8f8f8;
  color-scheme: dark light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color: #eeeeee;
    --back: #111111;
    --card-back: rgb(55.25, 55.25, 55.25);
    --card-head: hsl(220, 20%, 30%);
    --card-head-active: hsl(220, 80%, 30%);
  }
}

html,
body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: arial, ui-sans-serif, sans-serif;
  font-size: 1em;
  color: var(--color);
  background-color: var(--back);
}
html.sitelayout,
body.sitelayout {
  display: grid;
  grid-template-columns: auto;
  grid-template-areas: "header" "main" "sidebar" "footer";
  gap: var(--layout-gap);
  max-width: var(--doc-body-width);
  margin: 0 auto;
}
html.sitelayout:has(aside),
body.sitelayout:has(aside) {
  grid-template-columns: auto var(--sidebar-width);
  grid-template-areas: "header header" "main sidebar" "footer footer";
}
@media (width <= 1000px) {
  html.sitelayout:has(aside),
  body.sitelayout:has(aside) {
    grid-template-areas: "header" "main" "sidebar" "footer";
  }
}
html header,
body header {
  grid-area: header;
  /* background-color: #f0f0f0; */
  display: flex;
}
@media print {
  html header,
  body header {
    display: none !important;
  }
}
html header > *,
body header > * {
  align-self: flex-end;
  display: inline-block;
}
html header > *:not(:first-child),
body header > *:not(:first-child) {
  margin-left: var(--layout-gap);
}
html header > .logo,
body header > .logo {
  font-size: 160%;
  font-weight: bold;
}
html header a,
body header a {
  text-decoration: none;
  width: 12ch;
  text-align: center;
  padding: 0.2ch 1ch;
  transition: box-shadow 0.3s ease-in-out;
}
html header a:hover,
body header a:hover {
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.3);
}
html aside,
body aside {
  grid-area: sidebar;
  background-color: lime;
  padding: var(--layout-gap);
}
@media print {
  html aside,
  body aside {
    display: none !important;
  }
}
html main,
body main {
  grid-area: main;
  background-color: var(--content-back);
  padding: var(--layout-gap);
}
html footer,
body footer {
  grid-area: footer;
  background-color: lightblue;
  padding: var(--layout-gap);
}

@media (width > 800px) {
  body {
    padding: 8px;
  }
}
/* apply a natural box layout model to all elements, but allowing components to change */
*,
*::before,
*::after {
  box-sizing: inherit;
}

img {
  max-width: 600px;
  height: auto;
}

svg {
  color: currentcolor;
}
svg.button {
  width: 2em;
  height: 2em;
}
svg.button .object {
  fill: hsl(220, 80%, 30%);
  fill-opacity: 1;
}
svg.button .connect {
  fill: #00cc00;
  fill-opacity: 1;
}
svg.icon {
  user-select: none;
}

p,
pre,
code,
h2,
h3,
h4 {
  margin: 0;
  min-height: 1rem;
}
p > img,
p > svg,
pre > img,
pre > svg,
code > img,
code > svg,
h2 > img,
h2 > svg,
h3 > img,
h3 > svg,
h4 > img,
h4 > svg {
  height: 1em;
  height: auto;
}
p > img:first-child,
p > svg:first-child,
pre > img:first-child,
pre > svg:first-child,
code > img:first-child,
code > svg:first-child,
h2 > img:first-child,
h2 > svg:first-child,
h3 > img:first-child,
h3 > svg:first-child,
h4 > img:first-child,
h4 > svg:first-child {
  margin-right: 0.2em;
}
p + p,
p + pre,
p + code,
p + h2,
p + h3,
p + h4,
pre + p,
pre + pre,
pre + code,
pre + h2,
pre + h3,
pre + h4,
code + p,
code + pre,
code + code,
code + h2,
code + h3,
code + h4,
h2 + p,
h2 + pre,
h2 + code,
h2 + h2,
h2 + h3,
h2 + h4,
h3 + p,
h3 + pre,
h3 + code,
h3 + h2,
h3 + h3,
h3 + h4,
h4 + p,
h4 + pre,
h4 + code,
h4 + h2,
h4 + h3,
h4 + h4 {
  margin-top: 0.5rem;
}

a,
a:visited,
a:hover {
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

h2,
h3,
h4 {
  text-wrap: balance;
  font-family: arial, ui-sans-serif, sans-serif;
  font-weight: bold;
}

h2 {
  font-size: 1.6em;
  min-height: 1.6em;
}

h3 {
  font-size: 1.25em;
  min-height: 1.25em;
}

h4 {
  font-size: 1em;
  min-height: 1em;
}

code,
.code,
code.hljs,
pre > code {
  background-color: var(--code);
  color: #111111;
  font-size: 1rem;
  font-family: "Courier New", Courier, monospace;
}
@media print {
  code,
  .code,
  code.hljs,
  pre > code {
    border: 1px solid #111111;
  }
}

p > code {
  padding-left: 8px;
  padding-right: 4px;
}

pre > code {
  display: block;
  border-radius: 8px;
  padding: 4px;
}

label,
input,
input + span,
input::placeholder,
select,
output,
button {
  display: inline-block;
  font-size: inherit;
  margin: 0;
  border: 1px solid transparent;
  padding: 0.1em 0.2em;
  color: currentcolor;
}

input[type=color] {
  padding: 0;
  border: 0;
}

input::placeholder {
  padding-top: 0.4em;
  font-size: 0.8em;
}

label {
  cursor: pointer;
  height: 1.6em;
}
label > img,
label > .icon {
  width: 1em !important;
  height: 1em !important;
  margin: 0 !important;
}

input,
select,
button {
  border-color: var(--color);
}

input,
select {
  width: 22ch;
  border-radius: 0.2em;
}

select {
  padding-left: 0;
}

select:invalid,
input:invalid {
  border-color: #ff5555;
}

input[type=checkbox],
input[type=radio] {
  width: 2ch;
  vertical-align: baseline;
}

dialog::backdrop {
  background-color: rgba(200, 200, 200, 0.7);
}

dialog {
  position: relative;
  padding: 1rem;
  background-color: canvas;
  border: 0;
}
dialog .u-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  height: 1.6rem;
  width: 1.6rem;
  background-color: red;
  background-size: 1.6rem 1.6rem;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M12 12L36 36M36 12L12 36' stroke='white' stroke-width='8' stroke-linecap='round' /></svg>");
  z-index: 1 !important;
  user-select: none;
  cursor: pointer;
}
dialog::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 2rem;
  height: 2rem;
  z-index: -1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M0 0h48v48h-16v-32h-32z' fill='red' /></svg>");
}

nav {
  position: fixed;
  min-height: 100%;
  width: 24ch;
  z-index: 1;
  left: -24ch;
  transition: all 0.2s;
  padding: 1rem 0.2rem 0.2rem;
  background-color: var(--card-back);
}
nav.inpage {
  position: absolute;
}
nav.open {
  left: 0;
}
nav.inpage.open + main {
  margin-left: 24ch;
}
@media print {
  nav.inpage.open + main {
    margin-left: 0;
  }
}
nav a,
nav a:hover {
  text-decoration: none;
}
@media print {
  nav {
    display: none;
  }
}

main {
  transition: margin-left 0.2s;
}

.u-header {
  display: flex;
  flex-flow: row nowrap;
  margin-bottom: 0.5rem;
}
.u-header .icon {
  margin-right: 0.5rem;
  width: 2.6rem;
  height: 2.6rem;
  vertical-align: top;
}
.u-header h1 {
  margin: 0;
  font-size: 2.4rem;
  font-family: arial, ui-sans-serif, sans-serif;
  font-weight: bold;
}

.u-navbar {
  display: flex;
  flex-flow: row nowrap;
  margin-bottom: 0.5rem;
  padding: 8px 16px;
  background-color: hsl(220, 80%, 30%);
  color: white;
}
.u-navbar > .gap {
  flex-grow: 2;
}
.u-navbar > a {
  text-decoration: none;
  font-size: 1.25em;
  min-width: 2em;
  padding: 0 0.25rem;
}
.u-navbar > a:hover {
  border-color: var(--focus);
  background-color: var(--focus);
}
.u-navbar > img,
.u-navbar > svg {
  padding: 0;
  min-width: 1.4em !important;
  width: 1.4em !important;
  height: 1.4em !important;
}
.u-navbar > *:not(:first-child) {
  margin-left: 0.25rem;
}
@media print {
  .u-navbar {
    display: none;
  }
}

.error,
.warning,
.invalid {
  border: 2px solid #ff1111 !important;
  background-color: #ffcccc !important;
  color: #111111;
}

.valid {
  border: 2px solid #00cc00 !important;
  background-color: #ccffcc !important;
  color: #111111;
}

@media print {
  .noprint {
    display: none !important;
  }
}

:root {
  --grid-width: 20ch;
  --grid-gap: 1ch;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--card-back);
  border: none;
  border-radius: 8px;
}
@media print {
  .card {
    border: 1px solid #111111;
  }
}
.card.small {
  font-size: 0.8rem;
}
.card.small .form-grid {
  grid-template-columns: auto;
}
.card.small .form-grid > label {
  text-align: left;
}
.card.active .border {
  border-color: hsl(220, 100%, 30%);
}
.card.active .band::-webkit-slider-thumb {
  border-color: hsl(220, 100%, 30%) transparent;
}
.card.active > .block.header {
  background-color: var(--card-head-active);
}
.card .icon {
  width: 2.75rem;
  height: 2.75rem;
  float: left;
  margin-right: 0.5rem;
  overflow: hidden;
}
.card img.active,
.card svg.active {
  background-color: limegreen;
}
.card > .block {
  position: relative;
  flex: 1 1 auto;
  padding: 8px;
  min-height: 2rem;
}
.card > .block.header {
  background-color: var(--card-head);
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  min-height: 2.75em;
  max-height: 4rem;
}
.card > .block.header h3,
.card > .block.header h4 {
  margin: 0;
}
.card > .block.footer {
  border-top: 1px solid rgba(0, 0, 0, 0.125);
}
.card > hr {
  background-color: rgba(0, 0, 0, 0.125);
  border: 0;
  height: 1px;
  margin: 0;
  padding: 0;
}

body {
  container-type: size;
}

.panel {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fill, var(--grid-width));
  grid-auto-rows: minmax(min-content, max-content);
  grid-auto-flow: row;
  margin-top: 0.5rem;
  margin-left: auto;
  margin-right: auto;
  width: calc(2 * var(--grid-width) + var(--grid-gap));
}
@container (width >= 84ch) {
  .panel {
    width: calc(4 * var(--grid-width) + 3 * var(--grid-gap));
  }
}
@container (width >= 126ch) {
  .panel {
    width: calc(6 * var(--grid-width) + 5 * var(--grid-gap));
  }
}
.panel > .card {
  grid-column: span 2;
  width: 100%;
  min-width: 100%;
  align-self: start;
}
.panel > .card.small {
  grid-column: span 1;
}
.panel > .card.wide {
  grid-column: span 4;
}

button,
.button {
  display: inline-block;
  min-width: 6.5ch;
  padding: 2px 4px;
  border-radius: 4px;
  border-color: hsl(220, 80%, 30%);
  background-color: hsl(220, 80%, 30%);
  color: white;
  cursor: pointer;
  user-select: none;
}
button:visited,
.button:visited {
  color: white;
}
button:disabled, button:disabled:focus,
.button:disabled,
.button:disabled:focus {
  border-color: gray;
  background-color: gray;
}
button.active,
.button.active {
  background-color: #acc1e4 !important;
  border-color: #203050 !important;
}
button.secondary,
.button.secondary {
  background-color: #777777;
  border-color: #777777;
}

option[disabled] {
  color: gray;
}

input[type=range] {
  appearance: none;
  -webkit-appearance: none;
  vertical-align: top;
  margin: 0.2em;
  height: 1.2em;
  padding: 0;
  width: 9.8em;
  transition: 0.4s all ease-out;
  border-radius: 0.6em;
}
input[type=range]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  height: 1em;
  width: 1em;
  border-radius: 0.5em;
  background: #203050;
  border: 1px solid #f0f0f0;
  cursor: pointer;
}

input.switch[type=range] {
  pointer-events: none;
  width: 2.5em !important;
}

*:focus {
  outline: 0;
  box-shadow: 0 0 0.1rem 0.2rem var(--focus);
}

.btn-group {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
}
.btn-group > * {
  flex: 1 1 auto;
  margin: 0;
  border-radius: 0;
}
.btn-group > *:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.btn-group > *:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.form-grid {
  display: grid;
  grid-template-columns: 12.6ch auto;
  grid-gap: 5px;
  margin-bottom: 0.5rem;
}
.form-grid > * {
  grid-column-end: -1;
}
.form-grid > label {
  grid-column: 1;
  text-align: right;
}
.form-grid > .wide {
  grid-column: 1/-1;
}

.form-inline {
  height: 1.6em;
}
.form-inline > * {
  vertical-align: top;
}

.form-actions {
  display: flex;
  flex-flow: row wrap;
  gap: 0.25rem;
}

.element {
  position: relative;
  display: inline-block;
  height: 6rem;
  width: 6rem;
  margin: 0.6rem;
}
.element.wide {
  width: 10rem;
}
.element > svg,
.element > img {
  position: relative;
  left: 1rem;
  top: 0.4rem;
  height: 4rem;
  width: 4rem;
}
.element > .id {
  position: absolute;
  display: inline-block;
  bottom: 0.4rem;
  left: 0;
  height: 1rem;
  width: 6rem;
  text-align: center;
}
.element > .info {
  position: absolute;
  display: inline-block;
  top: 0.4rem;
  right: 0;
  height: 5.2rem;
  width: 4rem;
}

.u-bool {
  display: inline-block;
  height: 1.4rem;
  width: 1.4rem;
  border-radius: 0.7rem;
  text-align: center;
  background-color: silver;
}

.u-bool[value="1"] {
  background-image: linear-gradient(145deg, #4dff4d, #00b300);
}

.u-bool[value="0"] {
  background-image: linear-gradient(145deg, #ff9999, red);
}

.ux-levelbar {
  display: inline-block;
  border-color: hsl(220, 80%, 30%);
  border-style: solid;
  border-width: 1px;
  width: 32px;
  height: 64px;
}

.ux-value {
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
}

.u-bar {
  position: relative;
  height: 1.4em;
  width: 100%;
  background-color: #aaaaaa;
}

.u-bar > .pulse,
.u-bar > .current {
  display: inline-block;
  position: absolute;
}

.u-bar > .pulse {
  top: 0;
  left: 0;
  height: 1.4em;
  background-color: green;
}

.u-bar > .current {
  top: 0.4em;
  height: 0.6em;
  background-color: red;
}

.text-right {
  text-align: right;
}

.border {
  border: 1px solid #555555;
}

/* === Display Element === */
.display {
  position: relative;
  box-sizing: content-box;
  margin: auto;
  line-height: 10px;
  font-size: 10px;
  font-family: Verdana, Geneva, sans-serif;
  border: 2px solid #555555;
}
.display > span {
  box-sizing: border-box;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  height: 10px;
  overflow: hidden;
  background-color: transparent;
}
.display > span.text {
  color: #111111;
}
.display > span.dot {
  height: 10px;
  width: 10px;
  border-radius: 50%;
}
.display > span.dot.active {
  background-color: green;
}
.display > button {
  box-sizing: border-box;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  height: 10px;
  overflow: hidden;
  background-color: pink;
  color: #111111;
  border-radius: 0.4em;
}

.displayinc {
  position: relative;
  margin: auto;
  zoom: 2;
}
.displayinc > .icon {
  width: 1.2em;
  height: 1.2em;
  margin: 0;
}

/* === Light input sliders === */
input.band {
  width: 100%;
  border-radius: 0;
  border-width: 1px;
}
input.band.hue {
  background: linear-gradient(to right, red 0%, yellow 17%, lime 33%, aqua 50%, blue 67%, fuchsia 83%, red 100%);
}
input.band.white, input.band.lightness, input.band.saturation {
  background: linear-gradient(to right, black 0%, white 100%);
}

/*# sourceMappingURL=iotstyle.css.map */