styles.less

/* @font-face { */
/*   font-family: stix; */
/*   src: url(STIXTwoMath-Regular.otf); */
/* } */
@font-face {
  font-family: symbola;
  src: url(Symbola.ttf);
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #222;
}

div#page {
  display: table;
  width: 100%;
  height: 100%;

  & > div {
    display: table-row;
  }
}


div#header {
  background-color: #FFFFCC;
  /*background-color: lightgreen;*/
  display: table-cell;
}

div#content {
  display: table-cell;
  height: 100%;
}

div#footer {
  background-color: #FFFFCC;
  display: table-cell;
}


// MIXINS

.effect3d(@bgcolor) {
  background-color: @bgcolor;
  border-color: lighten(@bgcolor, 13%) darken(@bgcolor, 13%) darken(@bgcolor, 13%) lighten(@bgcolor, 13%);
  border-width:1px;
  border-style:solid;
}

.button3d(@bgcolor) {
  .effect3d(@bgcolor);

  &:hover {
    background-color: lighten(@bgcolor, 7%);
  }

  &:active {
    background-color: @bgcolor;
    border-color: darken(@bgcolor, 13%) lighten(@bgcolor, 13%) lighten(@bgcolor, 13%) darken(@bgcolor, 13%);
  }
}

.vcenter() {
  /* vertically centered */
  display: block;
  position:relative;
  top:50%;
  transform: translate(0, -50%);
}

.invalid-color {
  background: repeating-linear-gradient(
    45deg,
    #606dbc,
    #606dbc 10px,
    #465298 10px,
    #465298 20px
  );
}


// ROOMS

#content
{
  font-size:0;
}
.room {
  font-size:1rem;
  margin-left: .25em;

  h1 {
    font-size: 150%;
    margin-top: 0.5em;
    margin-left: 0.5em;
    margin-bottom: 0;
    color: #999;
  }

  h2 {
    font-size: 120%;
    margin-top: 0.3em;
    margin-left: 0.3em;
    margin-bottom: 0;
    color: #999;
  }

  h3 {
    font-size: 100%;
    margin-top: 0.3em;
    margin-left: 0.3em;
    margin-bottom: 0;
    color: #999;
  }
}
.room {
  display: inline-block;
  vertical-align: top;
}

// CONTAINER

.base-container
{
  font-size:0;
}

.base-button
{
  font-size:1rem;
  display: inline-block;
  text-align:center;
  vertical-align: top;
  user-select: none;
  touch-action: none;

  & > span {
    .vcenter;
  }
}


// BUTTONS

.licht-container {
  .base-container;
  text-align: center;
}
.licht-button {
  .base-button;
  width:5em;
  height:5em;
  margin: 0.3em;

  &.licht-an { .button3d(#45ef45); }
  &.licht-aus { .button3d(#ef4545); }
  &.licht-unknown { .button3d(#333333); color:#888888; }
  &.licht-unknown.licht-an { .effect3d(desaturate(#00DD00, 80%)); color:#444444; }
  &.licht-unknown.licht-aus { .effect3d(desaturate(#DD0000, 80%)); color:#444444; }
}
.tasmota-button {
  .licht-button
}

.fenster-container {
  .base-container;
  text-align: center;
  margin-top:0.5rem;
}
.fenster-box {
  .base-button;
  width:4em;
  height:4em;
  margin: 0.3em;

  &.fenster-geschlossen { .effect3d(darkblue); color:lightgrey; }
  &.fenster-offen { .effect3d(lightblue); color:grey; }
  &.fenster-unknown { .effect3d(#333333); color:#888888; }
  &.fenster-unknown.fenster-geschlossen { .effect3d(#44447B); color:lightgrey; }
  &.fenster-unknown.fenster-offen { .effect3d(#8899AA); color:lightgrey; }
}

.roomfunc-container {
  .base-container;
  text-align: center;
  margin-bottom:0.5rem;
}
.roompreset-button {
  .base-button;
  width:5em;
  height:5em;
  margin: 0.3em;

  &.licht-an { .button3d(#45ef45); }
  &.licht-aus { .button3d(#ef4545); }
  &.fade { .button3d(#4545ef); }
  &.disabled.licht-an { .effect3d(desaturate(#00DD00, 80%)); color:#444444; }
  &.disabled.licht-aus { .effect3d(desaturate(#DD0000, 80%)); color:#444444; }
  &.disabled.fade { .effect3d(desaturate(#0000DD, 80%)); color:#444444; }
}

.function-button {
  .base-button;
  width:5em;
  height:5em;
  margin: 0.3em;

  .button3d(#4545ef);
}

.mpd-container {
  background-color: #242;
  width:100%;
}
.mpd-control-box {
  .base-container;
  margin-top:0.5rem;
}
.mpd-button {
  font-size:1rem;
  display: inline-block;
  text-align:center;
  vertical-align: top;
  user-select: none;
  touch-action: none;

  font-family: symbola;
  font-weight: bold;

  width:1.5em;
  height:1.5em;
  margin: 0.3em;

  display: inline-flex;
  justify-content: center;
  align-items: center;
  /* align-items: baseline; */

  .button3d(#4c4);
  &.disabled { .effect3d(desaturate(#4a4, 30%)); color:#222; }
}
.mpd-status-box {
  color: #ccc;
  padding: 0.3em;
  max-width: 18em;
  overflow: hidden;

  > div.mpd-state.state-unknown:before { content: "\002753"; font-family: symbola; font-size: 120%; padding-left: 0.25em; padding-right: 0.25em; }
  > div.mpd-state.state-stopped:before { content: "\0023f9"; font-family: symbola; font-size: 120%; padding-left: 0.25em; padding-right: 0.25em; }
  > div.mpd-state.state-playing:before { content: "\0025b6"; font-family: symbola; font-size: 120%; padding-left: 0.25em; padding-right: 0.25em; }
  > div.mpd-state.state-paused:before  { content: "\0023f8"; font-family: symbola; font-size: 120%; padding-left: 0.25em; padding-right: 0.25em; }
}


// INFRASTRUCTURE

#infrastructure-container {
  font-size: 1rem;
  margin:0.3em;

  padding:0.8em;
  float:right;

  /*width:30em;*/
  min-height:30ex;

  border-style:groove;
  border-width:0.5em;
  border-color:#FFFFCC;

  h1 {
    font-size: 150%;
    color: #999;
    text-align:center;
  }

  ul {
    margin-left:0em;
    margin-right:2em;

    li {
      font-family: "Courier New", Courier, monospace;
    }

    li.alive   { color:green; }
    li.dead    { color:red; }
    li.unknown { color:grey; }
  }
}


// SHUTDOWN

#rightpane-container {
  float:right;
}

#shutdown-container {
  .base-container;
  padding:0.3em;
  text-align:center;
}

.shutdown-button {
  .base-button;
}

#shutdown {
  margin: 0.3em;
  width:7em;
  height:7em;

  .button3d(darkblue);
  color: lightgrey;

  &.disabled {
    .effect3d(#44447B);
    color: lightgrey;
  }
}
#shutdown-force {
  margin: 0.3em;
  width:7em;
  height:3em;

  .button3d(#80008B);
  color: lightgrey;

  &.disabled {
    .effect3d(#744479);
    color: lightgrey;
  }
}
.gate-button {
  .base-button;
  margin: 0.3em;
  width:7em;
  height:4em;

  .button3d(#729fcf);
  color: #111111;

  &.disabled {
    .effect3d(#527faf);
    color: #444444;
  }
}


// MPD

#time-container {
  float: right;
}

//#status-box { }
//.mpd-bar { }
.mpd-bar .mpd-status { min-width:20em; }


// DMX

.dmx-room-container {
  margin-top: 1em;
}

.dmx-container.dmx-master {
  margin-bottom: 1.5em;
}

.dmx-detail-container.hidden {
  display: none;
}

.dmx-color-row {
  display: flex;
  margin-top: 1em;

  & > .power-button {
    margin-left: 1em;
    color: white;
    user-select: none;
    font-family: symbola;
    font-weight: bold;

  }
}
.dmx-container.show-selecting > .dmx-color-row > .power-button {
  display: none;
}

.dmx-name {
  color: #999;
  font-size: 1.17em;
  font-weight: bolder;
  margin-left: 0.5em;
}
.dmx-color-window {
  width: 3em;
  /* height: 2ex; */
  height: 1.5em;
  margin-right: 0.5em;
  /* height: 1.17em; */
  /* display: inline-block; */
  background-color: #000;
}
.dmx-container.selected > .dmx-color-row {
  & > .dmx-name {
    color: #bbf;
    text-shadow: 0px 0px 2px blue;
  }
  & > .dmx-color-window {
    box-shadow: 0px 0px 3px 1px blue;
  }
  & > input {
    box-shadow: 0px 0px 3px 1px blue;
  }
}

.dmx-button-row {
  text-align: left;
  padding-left: 1em;
  display: none;

  .dmx-container.show-buttons:not(.show-selecting) & {
    display: block;
  }
}
.dmx-control-button {
  .base-button;
  width: 3em;
  height: 1.5em;
  margin: 0.3em;

  color: #222222;
  .button3d(#bbbb77);
  &.disabled { .effect3d(#666660); }

  &.on { .button3d(#45ef45); color: black; }
  &.disabled.on { .effect3d(#588558); color: black; }
  &.off { .button3d(#ef4545); color: black; }
  &.disabled.off { .effect3d(#855858); color: black; }
  &.white { .button3d(#ffffcc); color: black; }
  &.disabled.white { .effect3d(#ebebe0); color: black; }
}

.dmx-colors {
  margin-top: .5em;
  display: none;

  & input {
    display: block;
  }
  & input.hidden {
    display: none;
  }
  & input[data-color='red'] {
    background-color: #800;
  }
  & input[data-color='green'] {
    background-color: #080;
  }
  & input[data-color='blue'] {
    background-color: #008;
  }

  .dmx-container.show-colors:not(.show-selecting) & {
    display: block;
  }
}

.dmx-functions {
  margin-top: 1em;

  & > input {
    display: block;
  }
}
.dmx-functions-button-row {
  text-align: left;
  padding-left: 1em;

  & > .dmx-control-button {
    width: 7em;
  }
}

.dmx-container > .dmx-color-row > .dmx-checkbox,
.dmx-container > .dmx-color-row > .dmx-control-button[data-action='open'] {
  display: none;
}
.dmx-container.show-selecting > .dmx-color-row > .dmx-checkbox {
  display: inline;
}
.dmx-container.show-selecting > .dmx-color-row > .dmx-control-button[data-action='open'] {
  display: inline-block;
  margin: 0 0 0 1em;
}

.dmx-room-container > .open-close-button {
  width: 100%;
  text-align: center;
  margin-top: 0.5em;
  margin-bottom: 1.5em;

  span {
    color: #888;
  }
}


// POPUP

.base-popup {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);

  &.show {
    display: block;
  }
}
.base-popup-content {
  /* general popup stuff */
  background-color: #222;
  margin: auto;
  margin-top: 5%;
  padding: 20px;
  border: 1px solid #ffffcc;
  width: 80%;
  /* dmx controller content */
  color: #999;

  & .popup-close-button {
    .base-button;

    float: right;
    .button3d(#333333);
    color:#888888;

    width:5em;
    height:5em;
    margin: 0.3em;
  }

  & > h2 {
    margin-top: 0;
  }
}

// DMX POPUP

.dmx-popup {
  .base-popup;
}
.dmx-popup-content {
  .base-popup-content;

  & .dmx-container.dmx-master {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    column-gap: 1em;

    border-style: solid;
    border-width: 0 0 2px 0;
    padding-bottom: .5em;
    width: 100%;
  }

  & .dmx-functions-flex-row {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    column-gap: 1em;

    /* override normal value - only show if wrapping */
    row-gap: 1em;
    & .dmx-functions {
      margin-top: 0;
    }
  }

  & .popup-singles {
    display: flex;
    flex-wrap: wrap;
    padding-top: 1em;
    column-gap: 1em;
    row-gap: 2em;
  }
}

// FUNCTIONS POPUP

.functions-popup {
  .base-popup;
}
.functions-popup-content {
  .base-popup-content;

  & ul {
    list-style-type: none;
    overflow: hidden;
    padding: 0 1em 0 1em;
    margin: 1em;

    border-color: #ffffcc;
    border-width: 0 0 3px 0;
    border-style: solid;

    &> li {
      display: inline-block;
      padding: .5em 2em .5em 2em;
      font-weight: bold;
      border-radius: 1em 1em 0 0;
      border-color: #ffffcc;
      border-width: 3px 3px 0 3px;
      border-style: solid;
      margin-right: 1em;
      user-select: none;

      &.room-name {
        border-style: none;
        padding: .5em 0 .5em 0;
        font-size: 150%;
      }

      &.selected {
        background: #ffffcc;
        color: black;
      }
      &.hidden {
        display: none;
      }
    }
  }

  & > .tab-content {
    display: none;
  }
  & > .tab-content.show {
    display: block;
  }
  /* & > ul:has(> li.tab-presets.selected) ~.tab-content.tab-presets { */
  /*   display: block; */
  /* } */
  /* & > ul:has(> li.tab-kitchenlight.selected) ~.tab-content.tab-kitchenlight { */
  /*   display: block; */
  /* } */
  /* & > ul:has(> li.tab-media.selected) ~.tab-content.tab-media { */
  /*   display: block; */
  /* } */
}

// PRESETS

.tab-content.tab-presets {

  .preset-button {
    .base-button;
    width:7em;
    height:7em;
    margin: 0.3em;
    color: black;

    .button3d(lightblue);
  }
}

// MEDIA

.tab-content.tab-media {

  font-size: 0;

  .media-container {
    font-size: 1rem;
    vertical-align: top;
    display: inline-block;
    margin-left: .25em;

    &.online > h2:after {
      content: '(on)';
      color: green;
      font-size: 70%;
      margin-left: 1em;
      font-weight: none;
    }

    &.offline > h2:after {
      content: '(off)';
      color: red;
      font-size: 70%;
      margin-left: 1em;
      font-weight: none;
    }
  }

  // BEAMER

  .beamer-container {
    .media-container;
  }

  .beamer-content {
    .base-container;
    text-align: center;
  }

  .beamer-button {
    .base-button;
    width:4em;
    height:4em;
    margin: 0.3em;
    color: black;

    .button3d(lightblue);
    &.disabled { .effect3d(#8899AA); color:lightgrey; }

    &.power { .button3d(#ef4545); font-family: symbola; }
    &.power.disabled { .effect3d(desaturate(#DD0000, 80%)); color:#444444; font-family: symbola; }
    &.threed { .button3d(darkblue); color: lightgrey; }
    &.threed.disabled { .effect3d(#44447B); color:lightgrey; }
    &.e { .button3d(#45ef45); }
    &.e.disabled { .effect3d(desaturate(#00DD00, 80%)); color:#444444; }

    &.small {
      width:3em;
      height:3em;
    }
    &.space-up {
      margin-top:1em;
    }
    &.space-down {
      margin-bottom:1em;
    }
  }

  // ATEM

  .atem-container {
    .media-container;
  }

  .atem-content {
    .base-container;
    max-width: 20rem;
    vertical-align: top;
    display: inline-block;

    &> h3 {
      font-size: 1rem;
    }

    & > .sources,
    & > .outputs {
      text-align: center;

      &:empty:after {
        font-size: 1rem;
        font-style: italic;
        content: 'no elements available';
      }
    }

    & > .outputs {
      max-width: 15rem;
    }
  }

  .atem-button {
    .base-button;
    color: black;
    width:3em;
    height:3em;
    margin: 0.3em;

    .button3d(#666666);
    &.disabled { .effect3d(desaturate(#666666, 80%)); color:#444444; }

    &.preview { .button3d(#efaa45); }
    &.active { .button3d(#ef4545); }
    &.preview.disabled { .effect3d(desaturate(#DD8800, 80%)); color:#444444; }
    &.active.disabled { .effect3d(desaturate(#DD0000, 80%)); color:#444444; }
  }

  // ATEN HDMI MATRIX

  .aten-container {
    .media-container;
  }

  .aten-content {
    .base-container;
    text-align: center;
  }

  .aten-button {
    .base-button;
    color: black;
    width:3em;
    height:3em;
    margin: 0;

    .button3d(#666666);
    &.disabled { .effect3d(desaturate(#666666, 80%)); color:#444444; }

    &.active { .button3d(#ef4545); }
    &.active.disabled { .effect3d(desaturate(#DD0000, 80%)); color:#444444; }
  }

  .aten-row-label {
    font-size: 1rem;
    padding-right: 1.0em;
  }

  .aten-row-spacer {
    height: 1rem;
  }
}

// BUSLEISTE

.tab-content.tab-busleiste {

  h3 {
    display: inline-block;
    margin-left: .5em;
    margin-bottom: .5em;
  }

  .module {
    border-radius:1em;
    border-color:#ffffcc;
    border-width:2px;
    border-style:solid;
    max-width:25em;
    padding-left:.5em;
    padding-right:.5em;
    padding-bottom:.5em;
    margin-bottom:1em;

    &.active > h3:after {
      content: '( \23f5  )';
      color: green;
      font-size: 70%;
      margin-left: 1em;
      font-weight: none;
    }

    &.paused > h3:after {
      content: '( \23f8  )';
      color: orange;
      font-size: 70%;
      margin-left: 1em;
      font-weight: none;
    }
  }

  .data-container {
    border-color:#ffffcc;
    border-width:2px 0 0 0;
    border-style:solid;
    padding:.5em;
    padding-bottom:0;

    &.hidden {
      display:none;
    }

    .submit-button {
      .base-button;
      width:5em;
      height:2em;
      margin: 0.3em;
      color:black;

      .button3d(lightblue);

      &.disabled { .effect3d(#8899AA); color:lightgrey; }
    }
  }

  .button-container {
    font-size:0;
    margin-top:.5rem;
    float:right;

    .activate-button {
      .base-button;
      width:2em;
      height:2em;
      margin: 0.3em;
      color:black;

      &.module-active { .button3d(#45ef45); }
      &.module-inactive { .button3d(#ef4545); }
      &.module-unknown { .button3d(#333333); color:#888888; }
      &.module-unknown.module-active { .effect3d(desaturate(#00DD00, 80%)); color:#444444; }
      &.module-unknown.module-inactive { .effect3d(desaturate(#DD0000, 80%)); color:#444444; }
    }

    .enable-button {
      .base-button;
      width:2em;
      height:2em;
      margin: 0.3em;
      color:black;

      &.module-enabled { .button3d(#45ef45); }
      &.module-disabled { .button3d(#ef4545); }
      &.module-unknown { .button3d(#333333); color:#888888; }
      &.module-unknown.module-enabled { .effect3d(desaturate(#00DD00, 80%)); color:#444444; }
      &.module-unknown.module-disabled { .effect3d(desaturate(#DD0000, 80%)); color:#444444; }
    }
  }
}

// vim:set ft=css: