engagementgamelab/CivicSeed

View on GitHub
client/css/globals/game.styl

Summary

Maintainability
Test Coverage
@font-face
  font-family 'InconsolataMedium'
  src '/fonts/Inconsolata-webfont.woff' format('woff'),
    '/fonts/Inconsolata-webfont.ttf' format('truetype')
  font-weight normal
  font-style normal

.game-container, .game-container .container
  width 970px !important
  padding 0

#gameboard
  // cursor none
  position relative
  box-sizing content-box
  width 960px
  height 480px
  margin 0 auto
  padding 0
  border 4px solid $csBlack
  z-index 0
  background #eee
  color #333
  -webkit-touch-callout none
  user-select none
  cursor default
  .cutscene-background
    background black
    width 960px
    height 480px
    display none
    position absolute
    z-index 5000
    top 0
    left 0
    .cutscene
      position absolute
      width 960px
      height 480px
  .defeatedRobot
    text-align center

canvas
  position absolute
  cursor none

#background
  z-index 0
  &.lab-background
    background $cloudUrl('img/game/lab_bg.png') no-repeat center center

#characters
  z-index 20

#foreground
  z-index 30

#interface
  z-index 40

.minimap
  display none
  right 0px

#minimap-tile
  z-index 50

#minimap-player
  z-index 55
  background rgba(20,20,20,0.8)

#minimap-radar
  z-index 60
  background transparent

.gameboard-overlay
  display none
  position absolute
  top 15px
  left 15px
  right 15px
  bottom 15px
  z-index 1000
  padding 20px
  background #efefef
  background-image $cloudUrl('img/bg/grey.png')
  box-shadow $csUIDropShadow
  overflow hidden
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx)
    background-image $cloudUrl('img/bg/grey_2x.png')
    background-size 397px
  h1, h2, h3, h4, h5, h6
    font-weight bold
  h2
    color $csBlue
    font-weight bold
    margin-top 0
  h3
    color $csDarkGreen
  a, .close-overlay
    i.fa // Font-Awesome X 'close' button
      position absolute
      top 12px
      right 12px
      font-size 36px
  &.background-3
    background-image $cloudUrl('img/bg/tri.png')
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx)
      background-image $cloudUrl('img/bg/tri_2x.png')
      background-size 188px
  .buttons
    position absolute
    bottom 20px
    left 0
    width 100%
    height 30px
    button
      display inline-block
      margin 0 auto
    .left
      position absolute
      left 20px
      button
        margin 0 10px 0 0
    .right
      position absolute
      right 20px
      button
        margin 0 0 0 16px
  .check
    display none
    position absolute
    top 0
    left 0
    width 100%
    height 100%
    background-color rgba(255,255,255,0.75)
    z-index 1100
    .check-dialog
      position absolute
      left 280px
      top 140px
      width 360px
      height auto
      min-height 60px
      padding 14px
      text-align center
      color $csLightGray
      background $csPurple
      box-shadow $csUIDropShadow
      .buttons
        position relative
        margin-top 30px
        margin-bottom -20px
        height 32px
        button
          margin 0 auto
        .right
          position absolute
          right 0px
        .left
          position absolute
          left 0px
    .check-skimpy
      display none

.content-box
  height 320px
  padding 16px
  overflow auto
  border 3px solid $csGray
  background-color #eee
  user-select text
  cursor text

.scrollable
  overflow-y auto
  overflow-x hidden

#loading
  margin 150px 0 0 0
  text-align center
  color $csBlack

#botanist-area
  z-index 990
  // A transition animation occurs whenever this area changes in height
  -webkit-transition height .3s
  transition height .3s
  &.puzzle-mode
    height 390px
    .botanist-puzzle
      top 20px
  .dialog
    // See also .dialog at .resourceArea
    padding-right 50px
  .botanist-content
    h3
      text-align center
    .seed-chips, .botanist-minimap
      margin-top 30px
      margin-bottom 20px
      text-align center
  .botanist-puzzle
    position absolute
    top 40px
    left 0
    height 360px
    padding 0
    display none
    .puzzle-svg
      position absolute
      top 0
      left 0
      width 930px
      height 380px
    path
      cursor -webkit-grab
      cursor -moz-grab
      &.dragging
        cursor -webkit-grabbing
        cursor -moz-grabbing
    .trash
      position absolute
      top 170px
      right -6px
      cursor pointer
      z-index 1000
      &.active
        opacity 0.5
  textarea
    font-family $buttonFont
    width 800px
    // height 150px
    height 280px
    max-width 800px
    margin-top 20px
    resize none

#resource-area
  .resource-content
    display none
    .tangram
      position absolute
      bottom 120px
      left 0
      width 100%
      height 250px
      img
        margin-left 45px
        height 250px
    .tagline-input
      position absolute
      left 0
      bottom 50px
      width 100%
      text-align center
      input
        width 400px
  .resource-responses
    display none
    ul
      font-family $buttonFont
      padding-left 0
      li.response
        position relative
        padding 16px 140px 8px 16px
        margin 10px 0
        min-height 42px
        background $csLightGreen
        color $csBlack
        list-style none
        span
          margin-right 5px
          color white
        .public-button, .private-button, .pledge-button
          position absolute
          right 10px
          bottom 10px
          i.fa
            margin-left 6px
            color $csDarkBlue
        &.response-notice
          background: $csLightGray
      li.your-response
        user-select text
        cursor text
        background $csLightBlue
  .dialog
    padding-right 50px
    margin-bottom 20px
  .question
    font-size 1.2em
    color $csBlack
  .privacy-message
    margin-top 10px
    color $csDarkOrange
  .resource-article
    display none
    margin-right 30px  // And not overlap the X button
    height 360px
    padding 20px
    border 3px solid $csGray
    background #333
    overflow auto
    color #eee
    user-select text
    cursor text
    h1, h2, h3, h4, h5, h6
      // Allow all size headers to be used in resource text
      // Verify line-height issues with these.
      color $csBlue
      margin-bottom 0.5em
      margin-top 0
    p, blockquote, li
      // Shouldn't have to set these properties that specifically for the parent
      // div - something is overriding it.
      font-family $buttonFont
      font-size 1.1em
    p + h2, ul + h2, blockquote + h2
      margin-top 0.75em
    ul
      list-style-type square
    li
      margin 5px 20px
    img
      // Force images to fit content area
      max-width 100%
    iframe // formerly .resource-video. Verify this is working okay
      display block
      margin 0 auto
      background $cloudUrl('img/bg/loading.png') no-repeat center center
      margin-top 18px     // Ideally, vertically centered. Fake it till you make it
    .resource-external
      margin 150px 0 0 0  // Fake vertical centering
      font-size 1.5em
      text-align center
    .lede
      margin 90px 60px 0
      font-size 1.5em
      line-height 1.4em
      text-align center
  .resource-question
    display none
    form
      margin 20px 0 0
      height 300px
      overflow-y auto
    textarea
      width 100%
      height 200px
      padding 10px
      resize none
    input[type='radio']
      // Somewhere the alignment is actually incorrect
      margin 0 10px 0 20px
      line-height 24px
    label
      // Overrides display: block elsewhere (bootstrap?)
      display inline-block
    // Resource question with resume form hacks
    .resume-form
      .row
        margin-bottom 0.5em
    .resume-text-input
      min-width 500px
    .resume-textarea
      height 100px
    .resume-experience-section
      border-bottom 1px solid $csLightGray
      margin-bottom 0.5em

#resource-stage
  display none

#progress-area
  h2
    color $csGreen
    font-size 3.5em
  .personal-info
    position absolute
    left 20px
    bottom 20px
    width 280px
    height 330px
    padding 10px
    // border 3px solid $csLightOrange
    background $csGray
    color white
    .level-images
      img
        margin 7px
        border 2px solid rbga(0,0,0,0)
      .current-level-image
        border 2px solid $csLightOrange
    .resources-collected-heading
      position absolute
      top 230px
      left 20px
      font-size 1.5em
    .resources-collected
      position absolute
      font-family $buttonFont
      bottom 20px
      right 20px
      font-size 2em
    .current-level-name
      position absolute
      width 230px
      font-size 1.4em
      line-height 1.4em
      text-align left
      left 20px
      top 90px
    .collected-button
      position absolute
      bottom 24px
      left 20px

  .color-map
    position absolute
    // Hack
    bottom 50px
    left 325px
    width 310px
    height 360px
    margin 0
    padding 0
    .tabs
      font-family $bodyFont
      font-size 1.2em
      border 0
      color white
      text-align center
      cursor pointer
      div
        display inline-block
        width 155px
        height 40px
        line-height 40px
      .tab-you
        background $csLightOrange
      .tab-everyone
        background $csOrange
    .tab-content
      div
        color #fff
        position absolute
    #tab-you-pane
      background $csLightOrange
    #tab-everyone-pane
      background $csOrange
    .tab-pane
      width 310px
      height 350px
    .color-map-you,
    .color-map-everyone
      position absolute
      top 20px
      left 12px
      background #fff
      width 284px
      height 264px
      img
        position absolute
        left 0
        top 0
        width 100%
        height 100%
      img.minimap
        display none
        opacity 0.25
    .time-played, .percent-complete
      font-family $buttonFont
      font-size 1.3em
      top 295px
    .time-played
      left 12px
      .time-played-text
        margin-left 8px
    .percent-complete
      left 10px
      right 10px
      .progress
        width 100%
    .time-played-label, .percent-label
      top 320px
      color #efefef
    .time-played-label
      left 12px
    .percent-label
      right 12px
  .top-seeders
    position absolute
    bottom 20px
    right 20px
    width 250px
    height 330px
    background $csLightGreen
    color #333
    overflow hidden
    .top-seeders-heading, .your-seeds
      font-size 1.2em
      color white
      text-align center
      padding 5px 0 5px 0
      background $csGreen
    .your-seeds
      position absolute
      bottom 0
      font-family $buttonFont
      width 100%
    ol.top-seeders-ranking
      margin-top 15px
      li
        font-family $buttonFont

#collected-resources
  box-shadow none
  .back-button
    position absolute
    bottom 20px
    left 20px
  .displayMyAnswers
    height 320px
    .theQuestion
      font-size 1.1em
    .theAnswer
      position relative
      margin 15px 0
      font-family $buttonFont
      background $csLightGreen
      .seededCount
        position absolute
        top 6px
        right 6px
        font-family $buttonFont
        background $csPurple
        padding 3px
        border-radius 4px
        line-height 1
        color #fff
      .answerText
        width 780px
        padding 5px 10px
  // .playerAnswers
  //  color $csBlack
  //  list-style none
  //  padding 5px 5px 5px 10px
  //  margin 15px 15px 10px 15px
  //  position relative
  //  background #dedede
  //  background $csLightGreen

#skinventory
  .parts
    margin-bottom 10px
    text-align center
    .part
      // margin 0 auto 10px
      margin 0 0 10px 14px
      .outer
        cursor pointer
        float left
        position relative
        // bugged
        // display inline-block
        width 60px
        height 100%
        margin-right 20px
        padding 10px
        border 3px solid $csLightGray
        background-color #f4f4f4
        .badge-new
          display none
          position absolute
          top -8px
          right -8px
          font-size 18px
          color $csYellow
        .inner
          width 32px   // Lock in at width of sprite
          height 100%
          margin 0 auto
          font-size 1.5em
          text-align center
          color $csBlue
          i  // Overrides font-awesome line-height
            line-height inherit !important
        &:not(.locked):hover
          border 3px solid $csGreen
          background-color white
        &:last-of-type
          margin-right 0
      .locked
        &:hover
          i
            color $csRed
      .equipped
        border 3px solid $csDarkGreen
        background-color white
    .head
      height 54px
      .inner
        line-height 30px                // Positioning for lock
        background-position 0 0         // Positioning for sprite
    .torso
      height 42px
      .inner
        line-height 18px                // Positioning for lock
        background-position 0 -30px     // Positioning for sprite
    .legs
      height 42px
      .inner
        line-height 18px                // Positioning for lock
        background-position 0 -45px     // Positioning for sprite

// Pause menu has been disabled in the game
#pause-menu
  position absolute
  top 15px
  left 15px
  width 930px
  height 450px
  background $cloudUrl('img/bg/maze.png') #efefef
  box-shadow $csUIDropShadow
  padding 0
  z-index 9999
  display none
  p
    text-align center, Sans-serif
    color $csBlack
    font-size 2em
    margin-top 100px

#boss-area
  display none
  .video
    margin 20px 0 0 0
    text-align center
    background $cloudUrl('img/bg/loading.png') no-repeat center center
  .boss-resumes
    display none
    .content-box // Extends generic .content-box
      height 280px
      margin-top 15px
    .resume-response
      margin-bottom 20px
    .resume-question   // Match with resource .question
      font-size 1.2em
      color $csBlack
    .resume-answer     // Similar to resource .answer
      font-family $buttonFont
      padding 14px 20px
      margin 10px 0
      background $csLightGreen
      span
        color white
    .resume-response-prompt    // Similar to resource .response-notice
      font-family $buttonFont
      padding 14px 20px
      margin 10px 0
      background $csLightGray
      p
        font-weight bold
  .boss-instructions
    display none
    margin-top 20px
    img.minilab
      float left
      margin-right 20px
    p
      line-height 32px
    span, strong
      white-space nowrap
  .content
  .buttons
    text-align center

// END LARGE OVERLAYS

#inventory,
#seedventory
  position absolute
  bottom 15px
  left 15px
  right 15px
  width auto
  height 60px
  background rgba(50,50,50,0.9)
  padding 0
  z-index 1100
  display none
  button
    position absolute
    top 14px
    right 14px

#inventory
  .inventory-boxes,
  .inventory-items
    position absolute
    top 0
    left 0
    right 0
    bottom 0
  .inventory-tangram
    position absolute
    right 100px
  .inventory-box,
  .inventory-item
    float left
    margin 14px 0 10px 20px
    width 32px
    height 32px
  .inventory-box
    border 1px dashed #777
  .inventory-item
    cursor pointer
  .help
    position absolute
    right 0
    top 20px
    width 250px
    padding-right 20px
    color $csLightBlue
    line-height 1.2em
    text-align right
    display none

#seedventory
  padding-left 10px
  font-size 24px
  .seed
    display inline-block
    position relative
    margin 20px 20px 0 10px
    width 48px
    cursor pointer
    color #333             // default seed button color is empty
    &.active
      color #eee           // color for active seeds
    &.selected
      color $csOrange      // color for selected seed
    &.active:hover, &.selected:hover
      color $csGreen       // color for hover

#graffiti
  position absolute
  display none
  bottom 15px
  left 15px
  width 125px
  height 36px
  background rgba(50,50,50,0.9)
  z-index 940
  color white
  padding 8px 10px 0
  span
    color $csLightGreen
    text-align right
    float right

#hud
  margin-top 20px
  margin-bottom 20px
  -webkit-touch-callout none
  user-select none
  .hud-button
    position relative
    display inline-block
    width 48px
    height 48px
    margin 0 10px
    font-size 20px
    text-align center
    line-height 48px
    background-color #f1f1f1
    box-shadow 0 0 0 4px $csLightGray
    border-radius 50%
    cursor pointer
    &:hover
      box-shadow 0 0 0 4px $csLightGreen
      background-color white
      color $csOrange
    a
      display block
      height 100%
      width 100%
      color $csDarkBlue
  .hud-button-highlight
    box-shadow 0 0 0 4px $csOrange
  .hud-button-active
    background white
    box-shadow 0 0 0 4px $csGreen
  .hud-regular
    margin-left -10px
    .hud-global
      text-align right
  .hud-chat
    padding-top 8px
    input
      border 3px solid $csLightGray
      background white
      width 75%
      outline none !important
      &:focus
        border 3px solid $csGreen
        box-shadow none
    button
      margin-left 10px
      margin-top -2px
  .hud-boss
    display none
    .clock
      color $csBlue
      font-size 1.5em
      font-family $buttonFont
      text-align center
      line-height 36px
    .score
      text-align right
      line-height 36px
      color $csOrange
      font-size 1.2em
    .hud-mute
      float left

// Generic dialog styles
.dialog
  .speaker
    font-size 1.2em
    font-weight 700
    color $csBlue
    &:after
      content ':'
      margin-right 0.25em   // Workaround for minifier which will trim whitespace from the content declaration, if you used ': ' instead

// Speech bubble for players
.player-chat
  position absolute
  z-index 100
  padding 5px 10px
  height 32px
  font-size 16px
  font-family $buttonFont
  line-height 1.4
  text-align center
  white-space nowrap
  background rgba(0,0,0,0.75)
  color #eee
  border-radius 10px
.player-chat-pointer
  content ''
  position absolute
  z-index 100
  width 0
  border-width 12px 10px 0 0
  border-style solid
  border-color rgba(0,0,0,0.75) transparent
  &.flipped-horizontal
    border-width 12px 0 0 10px
    margin-left -32px
    &.flipped-vertical
      border-width 0 0 12px 10px
  &.flipped-vertical
    border-width 0 10px 12px 0

#speech-bubble
  display none
  z-index 960
  position absolute
  top 20px
  left 20px
  width 920px
  padding 14px
  background #efefef
  color $csBlack
  box-shadow $csUIDropShadow
  background-image $cloudUrl('img/bg/grey.png')
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx)
    background-image $cloudUrl('img/bg/grey_2x.png')
    background-size 397px
  .dialog
    margin 0
    padding 0
    &.fit
      width 760px
  .buttons
    position absolute
    bottom 10px
    right 6px
  button
    display none
    float right
    margin 0 6px

.debug p
  float left
  margin-left 20px

.badge
  // Used only on buttons on HUD and seedventory
  display none
  position absolute
  top -12px
  right -4px
  padding 3px
  border-radius 4px
  font-family $buttonFont
  line-height 1.2em
  color #333
  background-color $csYellow

#waiting-for-seed
  // May be removed if css .spinner works better
  //width 32px
  //height 32px
  z-index 4000
  position absolute
  display none

#beaming
  display none
  position absolute
  top 0
  left 0
  width 100%
  height 100%
  background $cloudUrl('img/game/teleport.gif') #eee no-repeat center center
  background-size cover
  z-index 4000

.message
  font-family $bodyFont

#game-log
  width 100%
  height 200px
  background #333
  margin-bottom 80px
  border 1em solid #333

#game-log-overlay
  display none
  position absolute
  left 20px
  bottom 20px
  width 500px
  height 120px
  padding 0.9em
  background rgba(50,50,50,0.3)
  text-shadow 1px 1px 0 $csBlack

#game-log, #game-log-overlay
  z-index 900
  overflow-y auto
  overflow-x hidden
  .log-entry
    padding 0
    margin 0.1em
    font-family $buttonFont
    &.chat
      color #fff
    &.status
      color $csLightOrange
    .date
      color $csLightBlue
      font-family $mono
      font-size .8em
      margin-right 0.8em
    .player-name
      color $csLightGreen
      margin-right 0.25em

#status-update
  display none
  position absolute
  bottom 90px
  width 100%
  text-align center
  font-size 16px
  font-family $buttonFont
  height 20px
  margin 0
  z-index 4500
  color #eee
  span
    background rgba(0,0,0,0.75)
    padding 5px 10px

.npc-bubble
  position absolute
  z-index 890
  width 32px
  height 32px
  font-family $mono
  text-align center
  line-height 32px
  border-radius 50%
  background rgba(50,50,50,0.7)
  color $csLightGreen
  cursor pointer
  &.npc-bubble-exclaim
    font-weight bold
    font-size 1.25em
    color $csYellow

.tooltip
  font-family $buttonFont
  font-size 13px

svg.tangram-svg
  // see also .puzzle-svg
  width 100%
  height 250px

// Custom content
#master-npc-instructions
  #community-npcs
    margin-top 6em
    text-align center
  .npc
    display inline-block
    width 30%
    height 200px
    text-align center
  .npc-image
    width 32px
    height 64px
    margin 0 auto
    background-repeat no-repeat
    margin-bottom 1em
  .hampton .npc-image
    background-image $cloudUrl('img/game/npcs.png')
    background-position 0px -896px
  .goose .npc-image
    background $cloudUrl('img/game/npcs.png')
    background-position 0px -640px
  .zeebo .npc-image
    background $cloudUrl('img/game/npcs.png')
    background-position 0px -1344px
  .npc-name
    font-size 1.2em
    font-weight 700
    color $csBlue
  .community-name
    color $csOrange