$blue: #268bd2
$base: #002b36
$softblue: lighten($base, 20%)
$red: #dc322f
$green: #859900
$std-padding: 10px
$bar-h: 35px

$fa-font-path: "fonts"
@import font-awesome/scss/font-awesome

.fa
  margin-right: 8px

*
  box-sizing: border-box
  -webkit-touch-callout: none
  -webkit-user-select: none
  -khtml-user-select: none
  -moz-user-select: none
  -ms-user-select: none
  user-select: none
  cursor: default

p
  display: inline-block
  margin: 0px
  height: $bar-h 
  line-height: $bar-h
  vertical-align: middle

body
  overflow: hidden
  height: 100%
  width: 100%
  padding: 0px
  font-family: Source Code Pro
  font-size: 10pt

#content
  position: absolute
  left: 0px
  top: 0px
  width: 100%
  height: 100%
  background-color: $base
  color: #B5C3C4
  opacity: 1
  height: 100%
  width: 100%
  margin: 0px

  > *
    float: left
    margin-top: 0px
    height: 100%

#desktops
  text-align: center

  ol
    list-style-type: none
    margin: 0px auto
    text-align: center
    width: 100%
    height: 100%
    padding: 0px

  li
    text-align: center
    margin: 0px
    padding:
      left: 8px
      right: 8px
    display: inline-block
    font-size: 10pt
    height: $bar-h
    line-height: $bar-h
    vertical-align: middle

    &.focus
      border-bottom: 3px solid white

#sysinfo
  position: absolute
  right: 0px
  height: 100%
  display: table-row
  table-layout: fixed

.sysinfo
  display: block
  background-color: lighten($base, 3%)
  border-left: 1px solid lighten($base, 10%)
  padding:
    left: $std-padding
    right: $std-padding
  float: right
  height: $bar-h
  line-height: $bar-h
  vertical-align: middle

  & > p, & > div, & > img
    display: inline-block
    height: $bar-h 
    line-height: $bar-h
    vertical-align: middle

.playing
  padding-left: 0px

  img
    height: 100%
    margin-right: 8px

.todays-events
  background-color: $softblue
  color: white
  text-align: center

  .no
    display: block
    font-size: 12pt
    line-height: 12pt
    padding-top: 5px
    font-weight: bold

  .label
    display: block
    font-size: 6pt
    line-height: 6pt


.batteries
  .fa:last-child
    margin-right: 0px

  .fa-battery-0, .fa-battery-1
    color: $red
  .fa-bolt
    text-shadow: 0px 0px 3px black

$bar-indicator-h: 10px
.bar-indicator
  width: 80px
  height: 100%
  position: relative

  .bar-container
    position: absolute
    height: 10px
    width: 100%
    top: ($bar-h - $bar-indicator-h)/2 - 2
    border: 1px solid lighten($base, 20%)

  .bar-fill
    position: absolute
    left: 0px
    top: 0px
    height: 100%
    background-color: $softblue

  &.high
    .bar-container
      border: 1px solid $green

    .bar-fill
      background-color: $green

  &.low
    .bar-container
      border: 1px solid desaturate($red, 20%)

    .bar-fill
      background-color: desaturate($red, 20%)

#sysinfo > #volume

#sysinfo > #clock
  color: white
  font-style: italic
    
