kaiwa/public/style.styl

// style.styl
@import _define
@import _reset

// variables
accentColor = #ec008c
baseColor = #00aeef

*
  -webkit-box-sizing: border-box
  -moz-box-sizing: border-box

::-webkit-input-placeholder
  color: #aaa
  font-weight: 200

:-moz-placeholder
  color: #aaa
  font-weight: 200

::-moz-placeholder 
  color: #aaa
  font-weight: 200

body
  helv()
  background: url(http://andyet.com/images/header.png)
  background-position: top center
  background-repeat: no-repeat
  overflow: hidden

  .loggedIn
    display: none

  &.authed
    .loggedOut
      display: none
    .loggedIn
      display: block

#logo
  height: 64px
  display: block
  margin-bottom: 80px
  position: relative
  top: 60px

  img
    position: absolute
    top: 0 
    left: 50%
    margin-left: -240px

h2
  font-weight: 600
  color: #333
  font-size: 40px
  text-align: center
  margin: 0

h3
  display: none

header
  position: absolute
  top: 20px
  right: 20px

.page.talk
  .controls
    top: 75px
    position: absolute
    left: 20px
    top: 100px
    margin: 0 auto
    z-index: 10
    button
      padding: 0 1em 0 2em
      height: 35px
      line-height: 31px 

    #shareScreen
      .unshare
        display: none
      &.sharingScreen
        background: accentColor
        .unshare
          display: block
        .share
          display: none

    #muteMicrophone
      .unmute
        display: none
      &.muted
        background: accentColor
        .unmute
          display: block
        .mute
          display: none

    #pauseVideo
      .resume
        display: none
      &.paused
        .resume
          display: block
        .pause
          display: none


  .lockControls
    display: inline
    .unlock
      display: none

    &.roomLocked
      .unlock
        display: inline
      .lock
        display: none

  h2 
    position: relative
    margin: 0
    line-height: 1
    top: -20px

    svg
      // green fill: #72B14D  
      fill: #12ACEF

  #logo
    width: 100px
    margin: 0 auto
    position: fixed
    left: 20px
    top: 20px
    overflow: hidden

    img
      left: 240px

  section
    padding: 0

  h3
    display: block
    font-size: 13px
    font-weight: normal
    margin: 0
    position: relative
    top: -20px
    text-align: center
    color: #aaa

    svg
      position: relative
      top: 3px
      fill: #aaa

a:link, a:visited
  color: #12ACEF

.desc
  text-align: center
  font-size: 18px
  margin-top: 0
  margin-bottom: 40px
  color: #555
  font-weight: 200

.about
  text-align: center
  width: 450px
  font-size: 13px
  margin: 80px auto
  color: #444
  position: relative
  z-index: 10

footer
  text-align: center
  color: #777
  font-size: 14px
  position: fixed
  bottom: 10px
  margin: 0
  left: 50%
  width: 500px
  margin-left: -250px
  z-index: 100

section
  margin: 0 auto
  width: 100%
  padding: 20px 0

#createRoom
  margin: 0 auto
  width: 400px
  position: relative
  z-index: 10

  input
    width: 380px
    height: 40px
    border: 0px none
    display: inline-block
    font-size: 16px
    padding: 0 10px
    background: #eaebeb
    border-radius: 3px
    font-weight: 100
    line-height: 40px
    color: #333
    font-weight: bold 
    margin: 0 0 10px 0
    text-align: left

  button
    position: relative
    width: 380px

#localVideo
  position: fixed
  top: 15px
  right: 15px  
  border: 5px solid #777
  outline: 0px
  height: 70px
  -o-transform: scaleX(-1)
  transform: scaleX(-1)

#remotes
  width: 100%
  height: 100%
  position: absolute
  top: 100px
  -webkit-perspective: 2000px
  -moz-perspective: 2000px
  z-index: 1

  video 
    position: absolute
    left: 4000px
    height: 200px
    -moz-transition: all 1s
    -moz-box-sizing: border-box
    -webkit-transition: all 1s
    -webkit-box-sizing: border-box

#ad
  cursor: pointer

a#ad:link, a#ad:visited
  color: #555
  text-decoration: none
  font-weight: 300
  font-size: 16px
  border-top: 1px solid #f0f0f0
  background-color: #fafafa
  width: 100%
  position: fixed
  left: 0
  right: 0
  bottom: 0
  padding: 0px
  line-height: 2.5
  text-align: left
  height: 40px

  &:before
    content: ""
    display: inline-block
    float: left
    background-image: url(https://andbang.com/images/AndBangHeader.png)
    width: 35px
    height: 35px
    background-size: 40px
    background-repeat: no-repeat
    margin-right: 10px

#andyet
  position: fixed
  bottom: 10px
  right: 10px
  z-index: 10

#game
  display: none

#game.gameActive
  display: block

#game, #viewport
  position: fixed
  display: block
  z-index: -1
  height: calc(100% \- 20px)
  height: -moz-calc(100% \- 20px)
  width: 100%
  top: 0


#instructions
  display: none
  background-color: rgba(0,0,0,.02)
  border: 1px solid #eee
  padding: 10px  
  top: 150px
  left: 20px
  width: 230px
  text-align: left

  h3
    font-size: 16px
    color: #333
    font-weight: bold
    text-align: left
    margin-bottom: 20px

  p
    font-size: 13px
    margin: 10px 0 0 0


button 
  border: none
  height: 40px
  padding: 0 1em
  position: relative
  border-radius: 3px
  font-weight: bold
  color: white
  line-height: 40px
  background: baseColor

  &#pauseVideo
    background: accentColor
    &:hover 
      background: darken(accentColor, 10%)

  &:hover
    background: darken(baseColor, 10%)

  .ss-icon
    font-size: 12px
    position: absolute
    top: 3px
    left: 12px