Stairs/web/site.scss

@import "variables.scss";


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

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

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 $containerShadowColor;
  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: 1px solid #111111;
  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, input
{
  font-family: 'Verdana', 'Arial', sans-serif;
}


button, .button, input[type=submit]
{
  @extend %outset;

  display: inline-block;
  padding: 0 12px;
  color: $buttonTextColor;
  background: $buttonBackground;
  cursor: pointer;
  line-height: 3rem;

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

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

    color: $buttonActiveTextColor;
    background: $buttonActiveBackground;
  }
}

input[type=submit], .button-primary
{
  background: $buttonPrimaryBackground;

  &:hover, &:focus, &.focus
  {
    background: $buttonPrimaryHoverBackground;
  }
}

a.button
{
  text-decoration: none
}


.navigation
{
  clear: both;
  margin-top: 3rem;
}

.tabs
{
  &>.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: $versionTextColor;
  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: $notificationBackground;
/*  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: $notificationErrorBackground;
  }
}


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

  &.disabled
  {
    cursor: not-allowed;
  }
}


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

  .control .inner
  {
    color: black;
    position: absolute;
    top: 4px;
    left: 4px;
    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)
  }
}


.form-control
{
  margin-top: 1em;
}


input[type=text], input[type=number], input[type=password], textarea
{
  @extend %inset;
  background: $inputBackground;
  color: $inputTextColor;
  padding: .5em;
  width: 100%;
}

select
{
  @extend %outset;
  background: $selectBackground;
  color: $inputTextColor;
  padding: .5em;
}

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: $sectionHeaderTextColor;
  background: $sectionHeaderBackground;
  font-size: 1.2rem;
  padding: .5rem;
}

h4
{
  font-size: 1.4rem;
}


input[disabled]
{
  cursor: not-allowed;
  color: $inputDisabledTextColor;
  background: $inputDisabledBackground;
}

label
{
  display: block;
  margin-top: .5em;
  margin-bottom: .5em;
}



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



@media #{$mediumScreen}
{
  .horizontal
  {
    clear: both;

    label
    {
      display: inline-block;
    }

    input[type=text], input[type=number], input[type=password], textarea
    {
      display: inline-block;
      float: right;
      width: 50%;
    }

    &:after
    {
      clear: both;
    }
  }
}

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


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


.suboptions
{
  margin-left: 5rem;
}


.buttons
{
  clear: both;
  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;
  }
}


.slidercontainer
{
  margin-top: 1rem;
}

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

    label {
      font-size: 1em;
    }

    background: $panelHeaderBackground;
    color: $panelHeaderTextColor;

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

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

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

    background: $panelBodyBackground;
    padding: 2rem;
  }


  &.active
  {
    .panel-header
    {
      background: $panelActiveHeaderBackground;
      color: $panelActiveHeaderTextColor;
    }
  }
}


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

.weekdays
{
  margin-top: 1rem;

  .label
  {
    width: 8em;
  }
}


.fade-enter-active, .fade-leave-active
{
  transition: opacity .5s;
}

.fade-enter, .fade-leave-to
{
  opacity: 0;
}


.range
{
  clear: both;

  .start
  {
    position: relative;
    display: inline-block;
    width: 49%;

    .slidercontainer
    {
      margin-right: 4em;
    }

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

  .end
  {
    position: relative;
    display: inline-block;
    float: right;
    width: 50%;

    .slidercontainer
    {
      margin-left: 4em;
    }

    .value
    {
      position: absolute;
      left: 0;
      top: 1.5rem;
      color: $sliderValueColor;
    }
  }

  &:after
  {
    clear: both;
  }
}