Stairs/web/site.scss

$color-primary: #0066ff;
$color-quaternary: #404040;

@import "milligram";



$bodyBackgroundColor: black;
$textColor: white;

$containerBackgroundColor: #202020;
$containerShadow: 0 0 50px #fcf6cf;

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

$buttonBorderColor: #404040;

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

$warningColor: #302f28;
$warningBorderColor: #000000;

$notificationColor: black;
$notificationBackgroundColor: #ffffcc;
$notificationBorderColor: #000000;
$notificationShadow: 0 0 10px black;

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

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


[v-cloak]
{
  display: none;
}

body
{
  background-color: $bodyBackgroundColor;
  color: $textColor;
  font-family: 'Verdana', 'Arial', sans-serif;
  font-size: 10pt;

  padding-bottom: 3rem;

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


input, textarea
{
  color: $textColor;
}


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

  box-shadow: $containerShadow;
  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; }
    }
  }
}

h1
{
  font-size: 16pt;
  margin: 0;
}

h2
{
  color: #c0c0c0;
  font-size: 10pt;
  margin: 0;
}

h3
{
  color: #808080;
  background-color: #282828;
  font-size: 14pt;
  border-bottom: solid 1px #808080;
}


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


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

  .button
  {
    background-color: $buttonBorderColor;
    color: $textColor !important;
    border-color: #808080;

    &.button-outline
    {
      background-color: transparent;
    }

    @media #{$smallScreen}
    {
      width: 100%;
    }
  }
}


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
{
  background: $warningColor;
  border: solid 1px $warningBorderColor;
  padding: .5em;
  margin-bottom: 2rem;
}


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

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


.notification
{
  background-color: $notificationBackgroundColor;
  border: solid 1px $notificationBorderColor;
  box-shadow: $notificationShadow;
  color: $notificationColor;
  cursor: pointer;
  padding: .5em;
  margin-bottom: 2rem;

  position: relative;

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

  .message
  {
    white-space: pre;
  }


  &.error
  {
    background-color: $errorBackgroundColor;
    border: solid 1px $errorBorderColor;
    color: $errorColor;
  }
}


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


.clear
{
  clear: both;
}


.panel
{
  border: solid 1px $panelBorderColor;
  margin-bottom: 2rem;
  padding: 0;

  & .panel-header
  {
    & 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
  {
    background-color: $panelBodyBackgroundColor;
    padding: 2rem;
  }
}


select
{
  background: $containerBackgroundColor;
  color: white;

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

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


.checkbox
{
  white-space: nowrap;
}


.weekday label
{
  width: 5em;
}