Stairs/web/site.scss

$smallScreen: "screen and (max-width: 767px)";
$mediumScreen: "screen and (min-width: 768px)";


$containerBackground: #202020;
$buttonBackground: #404040;
$buttonHoverBackground: #505050;
$buttonActiveBackground: #282828;

$checkRadioBackground: #404040;
$checkRadioSelectedBackground: #606060;

$panelBorderColor: #404040;
$panelBodyBackgroundColor: #242422;
$panelHeaderBackgroundColor: #302f28;
$panelHeaderColor: white;
$panelHeaderLinkColor: white;



html
{
  box-sizing: border-box;
  font-size: 62.5%;
}

body
{
  background-color: black;
  color: white;
  font-family: 'Verdana', 'Arial', sans-serif;
  font-size: 1.3em;
  font-weight: 300;
  letter-spacing: .01em;
  line-height: 1.3;

  padding-bottom: 3rem;

  @media #{$mediumScreen}
  {
    padding-top: 3rem;
  }
}

a
{
  text-decoration: none;
}


/*
  Hide VueJS container until the template has been processed
*/
[v-cloak]
{
  display: none;
}



#container
{
  background: $containerBackground;
  margin-top: 2rem;
  padding: 1rem;

  box-shadow: 0 0 50px #fcf6cf;
  border: solid 1px black;

  @media #{$mediumScreen}
  {
    width: 768px;
    margin-left: auto;
    margin-right: auto;
  }
}


.header
{
  position: relative;

  img
  {
    float: left;
    margin-right: 1rem;
  }

  .wifistatus
  {
    @media #{$smallScreen}
    {
      clear: both;
      margin-top: 3rem;
    }

    @media #{$mediumScreen}
    {
      position: absolute;
      right: 0;
      top: 0;
    }

    .indicator
    {
      display: inline-block;
      width: 1rem;
      height: 1rem;
      border-radius: 50%;
      margin-right: 0.5rem;

      &[data-status=connected] { background-color: #339966; }
      &[data-status=disconnected] { border: solid 1px #808080; }
      &[data-status=connecting] { background-color: #ff9933; }
      &[data-status=error] { background-color: #cc0000; }
    }
  }
}


%outset
{
  border: 1px solid #111111;
  border-radius: 3px;
  box-shadow: inset 0 1px rgba(255,255,255,0.1), inset 0 -1px 3px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.08), 0 1px 2px rgba(0,0,0,0.15);
}


%inset
{
  border-color: black #111111 #111111;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.25),0 1px rgba(255,255,255,0.08);
}


.button
{
  @extend %outset;

  display: inline-block;
  padding: 0 12px;
  color: #dddddd;
  background: $buttonBackground;
  cursor: pointer;

  &:hover, &:focus, &.focus
  {
    color: #dddddd;
    background: $buttonHoverBackground;
    outline: none
  }

  &:active, &.active
  {
    @extend %inset;

    color: #cccccc;
    background: $buttonActiveBackground;
  }
}

a.button
{
    line-height: 3rem;
    text-decoration: none
}


.tabs
{
  clear: both;
  margin-top: 3rem;

  &>.button
  {
    margin-left: -1px;
    border-radius: 0;

    &:first-child
    {
      margin-left: 0;
      border-radius: 3px 0 0 3px
    }

    &:last-child
    {
      border-radius: 0 3px 3px 0
    }

    &:focus
    {
      position: relative;
      z-index: 1
    }
  }
}


.version
{
  color: #808080;
  font-size: 8pt;
  text-align: center;
  margin-top: 2rem;
}


.notificationContainer
{
  position: fixed;
  top: 2rem;
  z-index: 666;

  @media #{$mediumScreen}
  {
    width: 512px;
    left: 50%;
  }
}


.notification
{
  @extend %outset;

  background: #297ab8;
/*  border: solid 1px $notificationBorderColor;*/
  box-shadow: 0 0 10px black;
  color: white;
  cursor: pointer;
  padding: .5em;
  margin-bottom: 2rem;

  position: relative;

  @media #{$mediumScreen}
  {
    left: -50%;
  }

  .message
  {
    white-space: pre;
  }


  &.error
  {
    background: #973a38;
  }
}


.check, .radio
{
  display: inline-block;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;

  .control
  {
    @extend %outset;
    background: $checkRadioBackground;
    display: inline-block;
    width: 16px;
    height: 16px;
    position: relative;
  }

  .label
  {
    display: inline-block;
    margin-left: .5em;
    vertical-align: top;
  }

  &.checked
  {
    .control
    {
      background: $checkRadioSelectedBackground;

      .inner
      {
      }
    }
  }
}


.radio
{
  .control, .control .inner
  {
    border-radius: 50%;
  }

  .control .inner
  {
    color: black;
    position: absolute;
    top: 5px;
    left: 5px;
    width: 6px;
    height: 6px;
  }

  &.checked .control .inner
  {
    background: #cccccc;
    box-shadow: 0 1px rgba(0,0,0,0.5);
  }
}


.check
{
  .control .inner
  {
    position: absolute;
    top: 5px;
    left: 4px;
    width: 6px;
    height: 3px;
  }

  &.checked .control .inner
  {
    border: solid rgba(255,255,255,0.8);
    border-width: 0 0 2px 2px;
    transform: rotate(-45deg);
    box-shadow: -1px 0 rgba(0,0,0,0.2), 0 1px rgba(0,0,0,0.5)
  }
}



$buttonBorderColor: #404040;

$sliderBarColor: #404040;
$sliderBarSize: .5rem;
$sliderThumbColor: #fcf6cf;
$sliderThumbSize: 2rem;
$sliderValueColor: #808080;

$errorColor: black;
$errorBackgroundColor: #ffc6b3;
$errorBorderColor: #000000;





input, textarea
{
  color: white;
}

input[type=range]
{
  margin-top: 1rem;
  margin-bottom: 1rem;
}



h1
{
  font-size: 2rem;
  margin: 0;
}

h2
{
  color: #c0c0c0;
  font-size: 1.2rem;
  margin: 0;
}

h3
{
  @extend %outset;
  color: #808080;
  background-color: #282828;
  font-size: 1.2rem;
  padding: .5rem;
}


input[disabled]
{
  cursor: not-allowed;
  color: #808080;
  background-color: #262626;
}


.label-inline
{
  margin-right: 2rem;
}


.hint
{
  display: block;
  font-size: 8pt;
  color: #808080;
  margin-bottom: 1.5rem;
}


.loading
{
  margin-top: 3rem;
  text-align: center;
}


.suboptions
{
  margin-left: 5rem;
}


.buttons
{
  text-align: center;
}


.sliders
{
  margin-top: 2rem;
}


.step
{
  margin-left: 3rem;
  margin-right: 3rem;
  position: relative;

  .slidercontainer
  {
    margin-right: 4em;
  }

  .value
  {
    position: absolute;
    right: 0;
    top: .1rem;
    color: $sliderValueColor;
  }
}


.slider
{
  -webkit-appearance: none;
  width: 100%;
  height: $sliderBarSize;
  border-radius: $sliderBarSize / 2;
  background: $sliderBarColor;
  outline: none;

  &::-webkit-slider-thumb
  {
    -webkit-appearance: none;
    appearance: none;
    width: $sliderThumbSize;
    height: $sliderThumbSize;
    border-radius: 50%;
    background: $sliderThumbColor;
    cursor: pointer;
  }

  &::-moz-range-thumb
  {
    width: $sliderThumbSize;
    height: $sliderThumbSize;
    border-radius: 50%;
    background: $sliderThumbColor;
    cursor: pointer;
  }
}


.warning
{
  @extend %outset;
  background: #973a38;
  padding: .5em;
  margin-bottom: 2rem;
  margin-top: 1rem;
}


.nodata
{
  color: #808080;
  text-align: center;
}


.clear
{
  clear: both;
}


.panel
{
  margin-bottom: 2rem;
  padding: 0;

  .panel-header
  {
    @extend %outset;
    border-radius: 3px 3px 0 0;
    border-bottom-width: 0;
    padding: .5em;

    & input[type=checkbox] {
      margin-left: 0.5em;
      margin-top: 0.5em;
      margin-bottom: 0.5em;
    }

    & label {
      font-size: 1em;
    }

    background-color: $panelHeaderBackgroundColor;
    color: $panelHeaderColor;

    & .actions
    {
      @media #{$mediumScreen}
      {
        float: right;
      }
    }

    & a, & label
    {
      color: $panelHeaderLinkColor;
    }
  }

  & .panel-body
  {
    @extend %outset;
    border-radius: 0 0 3px 3px;

    background-color: $panelBodyBackgroundColor;
    padding: 2rem;
  }
}


select
{
  background: $containerBackground;
  color: white;

  &:focus
  {
    background-image: none;
  }
}

.inline
{
  display: inline-block;
  width: auto;
}

.weekdays .label
{
  width: 8em;
}