global.styl

@import "./variables"
@import "./transitions"

@font-face
  font-family 'Material Icons'
  font-style normal
  font-weight 400
  src url(./assets/MaterialIcons-Regular.woff2) format('woff2')

@font-face
  font-family 'Roboto'
  font-style normal
  font-weight 400
  src local('Roboto'), local('Roboto-Regular'), url(./assets/Roboto-Regular.woff2) format('woff2')

.material-icons
  font-family 'Material Icons'
  font-weight normal
  font-style normal
  font-size 22px
  display inline-block
  width 1em
  height 1em
  color #999
  line-height 1
  text-transform none
  letter-spacing normal
  word-wrap normal
  white-space nowrap
  direction ltr
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale
  &.medium
    transform scale(0.9)
  &.small
    transform scale(0.8)

.toggle-recording .material-icons
  color #999 !important
  &.enabled
    color red !important
    text-shadow 0 0 3px rgba(255, 0, 0, .4)

html, body
  margin 0
  padding 0
  font-family Roboto
  font-size 16px
  color #444

*
  box-sizing border-box

$arrow-color = #444

.arrow
  display inline-block
  width 0
  height 0
  &.up
    border-left 4px solid transparent
    border-right 4px solid transparent
    border-bottom 6px solid $arrow-color
  &.down
    border-left 4px solid transparent
    border-right 4px solid transparent
    border-top 6px solid $arrow-color
  &.right
    border-top 4px solid transparent
    border-bottom 4px solid transparent
    border-left 6px solid $arrow-color
  &.left
    border-top 4px solid transparent
    border-bottom 4px solid transparent
    border-right 6px solid $arrow-color

.notice
  display flex
  align-items center
  height 100%
  width 100%
  color #aaa
  div
    text-align center
    padding 0.5em
    margin 0 auto