iotstyle.css

:root {
  color-scheme: light dark;
  --back: light-dark(hsl(220deg 2% 85%), hsl(220deg 2% 15%));
  --color: light-dark(hsl(220deg 0 10%), hsl(220deg 0 90%));
  --success-hue: 80deg;
  --success-back: hsl(var(--success-hue) 90% 75%);
  --success-line: hsl(var(--success-hue) 90% 40%);
  --warning-hue: 40deg;
  --warning-back: hsl(var(--warning-hue) 90% 75%);
  --warning-line: hsl(var(--warning-hue) 90% 40%);
  --warning-color: black;
  --error-hue: 0deg;
  --error-back: hsl(var(--error-hue) 90% 75%);
  --error-line: hsl(var(--error-hue) 90% 40%);
  --error-color: color;
  --focus: hsl(220, 50%, 50%);
  --text-spacing: 0.5rem;
  --transition: 0.3s ease;
}

html,
body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: arial, ui-sans-serif, sans-serif;
  font-size: 1rem;
  line-height: 1.2rem;
  color: var(--color);
  background-color: var(--back);
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

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

a,
a:any-link {
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

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

h1 {
  font-size: 2em;
}

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>");
}

.warning {
  border: 2px solid var(--warning-line);
  background-color: var(--warning-back);
  color: var(--warning-color);
}

.error {
  border: 2px solid var(--error-line);
  background-color: var(--error-back);
  color: var(--error-color);
}

.invalid {
  border: 2px solid #ff1111 !important;
  background-color: #ffcccc !important;
  color: var(--color);
}

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

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

:root {
  --sidebar-width: 14em;
  --layout-gap: 1em;
  --layout-padding: 0.5em;
  --header-back: var (--back);
  --header-color: var (--color);
  --main-back: light-dark(hsl(220deg 0 90%), hsl(220deg 0 10%));
  --main-color: var(--color);
  --main-width: 42em;
  --navbar-back: hsl(220, 80%, 30%);
  --navbar-color: white;
  --navbar-padding: var(--layout-padding);
  --footer-back: var(--back);
  --footer-color: var(--color);
  --menu-back: light-dark(white, black);
  --menu-color: light-dark(black, white);
  --menu-top: 0;
  --menu-width: 14em;
  --menu-padding: var(--layout-padding);
  --dropshadow: rgb(0 0 0 / 40%) 4px 4px 12px 0;
}

body.sitelayout {
  display: grid;
  gap: 0;
  width: var(--main-width);
  margin: 0 auto;
  padding: 1em 0 0 0;
  grid-template-columns: 1fr;
  grid-template-areas: "header" "navbar" "main" "sidebar" "footer";
}
@media (57em <= width) {
  body.sitelayout:has(> .sidebar) {
    width: 57em;
    grid-template-columns: 1fr auto;
    grid-template-areas: "header header" "navbar navbar" "main sidebar" "footer footer";
  }
}
body.sitelayout > header {
  grid-area: header;
  margin-bottom: var(--layout-gap);
}
body.sitelayout > .navbar {
  grid-area: navbar;
  margin-bottom: var(--layout-gap);
}
body.sitelayout > main {
  grid-area: main;
}
body.sitelayout > .sidebar {
  grid-area: sidebar;
  margin-left: var(--layout-gap);
}
body.sitelayout > footer {
  grid-area: footer;
  margin-top: var(--layout-gap);
}
body.sitelayout.fillscreen {
  width: 100vw;
  height: 100vh;
  grid-template-rows: auto auto 1fr auto;
}
body.sitelayout header {
  display: flex;
  padding: var(--layout-padding);
  background-color: var(--header-back);
  color: var(--header-color);
}
@media print {
  body.sitelayout header {
    display: none !important;
  }
}
body.sitelayout header > .icon {
  width: 2rem;
  height: 2rem;
}
body.sitelayout header > h1 {
  margin: 0;
  padding: 0;
}
body.sitelayout header > * {
  align-self: center;
  display: inline-block;
}
body.sitelayout header > *:not(:first-child) {
  margin-left: var(--layout-padding);
}
body.sitelayout header > .logo {
  font-size: 160%;
  font-weight: bold;
}
body.sitelayout header a {
  text-decoration: none;
  width: 12ch;
  text-align: center;
  padding: 0.2ch 1ch;
  transition: box-shadow 0.3s ease-in-out;
}
body.sitelayout header a:hover {
  box-shadow: var(--dropshadow);
}
body.sitelayout .navbar {
  display: flex;
  flex-flow: row nowrap;
  padding: var(--layout-padding);
  background-color: var(--navbar-back);
  color: var(--navbar-color);
}
body.sitelayout .navbar > * {
  align-self: center;
}
body.sitelayout .navbar > .gap {
  flex-grow: 2;
}
body.sitelayout .navbar > a {
  text-decoration: none;
  font-size: 1.25em;
  min-width: 2em;
  padding: 0 var(--layout-padding);
}
body.sitelayout .navbar > a:hover {
  border-color: var(--focus);
  background-color: var(--focus);
}
body.sitelayout .navbar > button,
body.sitelayout .navbar > img,
body.sitelayout .navbar > svg {
  padding: 0;
  min-width: 1.25em !important;
  width: 1.25em !important;
  height: 1.25em !important;
}
body.sitelayout .navbar > *:not(:first-child) {
  margin-left: var(--layout-padding);
}
body.sitelayout .navbar > button:hover {
  box-shadow: var(--dropshadow);
}
@media print {
  body.sitelayout .navbar {
    display: none;
  }
}
body.sitelayout .sidebar {
  color: var(--main-color);
  background-color: var(--main-back);
  padding: var(--layout-padding);
  width: var(--sidebar-width);
}
@media print {
  body.sitelayout .sidebar {
    display: none !important;
  }
}
body.sitelayout main {
  background-color: var(--main-back);
  color: var(--main-color);
  padding: var(--layout-padding) 0;
  container-name: main;
  container-type: inline-size;
}
body.sitelayout footer {
  background-color: var(--main-back);
  color: var(--main-color);
  padding: var(--layout-padding);
}

.menu {
  position: absolute;
  display: block;
  border: 1px solid var(--menu-color);
  background-color: var(--menu-back);
  color: var(--menu-color);
  width: var(--menu-width);
  min-height: 360px;
  z-index: 1;
  top: 6.2rem;
  left: 0;
  transition: all var(--transition);
  padding: var(--menu-padding);
  margin: 0;
  transform: translateX(calc(0px - var(--menu-width)));
}
.menu:popover-open {
  transform: translateX(0);
}
.menu::backdrop {
  background-color: rgba(200, 200, 200, 0.7);
}
.menu a,
.menu a:hover {
  text-decoration: none;
}
@media print {
  .menu {
    display: none;
  }
}

@media (width > 1200px) {
  .menu {
    transform: translateX(0);
  }
  :root:has(.menu) {
    padding-left: var(--menu-width);
    transition: padding-left var(--transition);
  }
  button[popovertarget] {
    display: none;
  }
}
:root {
  /* pixel units are preferred to create exact card sizes. */
  --card-width: 280px;
  --card-gap: 16px;
  --card-height: 320px;
  --card-back: light-dark(white, black);
  --card-color: var(--main-color);
  --card-head: hsl(220deg 20% 80%);
  --card-head-active: hsl(220, 80%, 80%);
  --card-border: none;
  --card-padding: 0.5em;
  --card-image-size: 120px;
  --card-icon-size: 2.75em;
  --card-radius: 1em;
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: var(--card-gap);
  margin: 0 auto;
}
.card-container.horizontal {
  --card-width: 100%;
  --card-height: 7.2rem;
}
.card-container.horizontal > .card {
  grid-template: "header main" 1fr "header footer" auto/max-content auto;
}
.card-container.horizontal > .card > svg:first-child,
.card-container.horizontal > .card > img:first-child {
  width: var(--card-image-size);
  height: 100%;
}
.card-container.col280 {
  width: 1168px;
}
@container main (width < 1168px) {
  .card-container.col280 {
    width: 872px;
  }
}
@container main (width < 872px) {
  .card-container.col280 {
    width: 576px;
  }
}
@container main (width < 560px) {
  .card-container.col280 {
    width: 280px;
  }
}
.card-container.col365 {
  --card-width: 365px;
  --card-gap: 10px;
  width: 1490px;
}
@container main (width <= 1490px) {
  .card-container.col365 {
    width: 1115px;
  }
}
@container main (width < 1115px) {
  .card-container.col365 {
    width: 740px;
  }
}
@container main (width < 730px) {
  .card-container.col365 {
    width: 365px;
  }
}

.card {
  position: relative;
  width: var(--card-width);
  height: var(--card-height);
  display: grid;
  grid-template: "header" auto "main" 1fr "footer" auto/auto;
  gap: 0;
  margin: 0;
  padding: 0;
  page-break-inside: avoid;
  overflow: hidden;
  background-color: var(--card-back);
  border: var(--card-border);
  border-radius: var(--card-radius);
}
@media print {
  .card {
    border: 1px solid var(--color);
  }
}
.card.wide {
  width: calc(var(--card-width) * 2 + var(--card-gap));
}
.card.small {
  width: calc((var(--card-width) - var(--card-gap)) / 2);
  height: calc((var(--card-height) - var(--card-gap)) / 2);
}
.card.shadow {
  box-shadow: var(--dropshadow);
}
.card > svg:first-child,
.card > img:first-child {
  grid-area: header;
  width: 100%;
  height: var(--card-image-size);
  object-fit: cover;
}
.card > svg:first-child.xicon,
.card > img:first-child.xicon {
  width: 2.75em;
  height: 2.75em;
}
.card .header {
  grid-area: header;
  background-color: var(--card-head);
  padding: var(--card-padding);
  min-height: calc(var(--card-icon-size) + 2 * var(--card-padding));
  max-height: 4rem;
}
.card .header h3,
.card .header h4 {
  display: inline-block;
  margin: 0;
}
.card .header > svg:first-child,
.card .header > img:first-child {
  float: left;
  height: var(--card-icon-size);
  aspect-ratio: 1/1;
  margin-right: var(--card-padding);
}
.card .main,
.card .body {
  grid-area: main;
  flex: 1;
  padding: var(--card-padding);
}
.card .footer {
  grid-area: footer;
  height: auto;
  width: 100%;
  padding: var(--card-padding);
  border-top: 1px solid rgba(0, 0, 0, 0.125);
  background-color: inherit;
  text-align: right;
}
.card .footer button:not(:first-child) {
  margin-left: var(--text-spacing);
}
.card.autolink h3 > a::before {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  content: "";
}

.imgcard {
  position: relative;
  margin: 0.5rem 0.5rem 0.5rem 0;
  width: 100%;
  max-width: 100%;
  background-color: var(--card-back);
  page-break-inside: avoid;
  padding: 0.25rem 0.25rem 0 9.85rem;
  min-height: 7.2rem;
}
.imgcard > h3 {
  margin-top: 0;
}
.imgcard img {
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
  width: 9.6rem;
  max-height: 7.2rem;
}

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

.card.active .border {
  border-color: hsl(220, 100%, 30%);
}
.card.active .band::-webkit-slider-thumb {
  border-color: hsl(220, 100%, 30%) transparent;
}
.card.active > .header {
  background-color: var(--card-head-active);
}
.card img.active,
.card svg.active {
  background-color: limegreen;
}
.card > hr {
  background-color: rgba(0, 0, 0, 0.125);
  border: 0;
  height: 1px;
  margin: 0;
  padding: 0;
}

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-grid .icon {
  width: 1.2em;
  height: 1.2em;
  margin: 0.2em;
}

.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, rgb(64.2, 255, 64.2), rgb(0, 166.2, 0));
}

.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 {
  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: var(--color);
}
.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: var(--color);
  border-radius: 0.4em;
}

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

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 */