engagementgamelab/CivicSeed

.admin-container
  .environment
    text-transform capitalize
  button
    &:not(:last-of-type)
      margin-right 10px
  .back-to-admin
    font-family $buttonFont
    white-space nowrap
    i
      margin-right 6px
      font-size 1.4em

.console
  width 100%
  margin 25px auto
  padding 25px
  background $csLightGray
  .console-content
    padding 20px
    border 2px solid $csGray
    background-color white
    .row
      margin-bottom 10px
  h2
    margin-top 10px
    font-weight normal
    color $csDarkGreen
  a.btn
    display block
    color white
    font-family $buttonFont
  button
    position relative
    &.btn-success
      // Needed to overwrite CSS priority
      background $csGreen !important
    &.btn-error
      // Needed to overwrite CSS priority
      background $csRed !important
    .spinner
      position absolute
      top 0
      left 50%
      margin-left -5px
  .admin-instructions
    padding-top 4px
  .control-group
    .controls
      input
        width 100%
  .server-response
    font-weight bold
    color $csDarkBlue
    &.error
      color $csRed

#admin-startup,
#admin-export
  button
    width 100%

#admin-invites
  form
    margin-top 20px

#admin-monitor
  .console-buttons
    width 33%
    display inline-block
    margin-top 20px
  .monitor-button
    width 90%
    margin-bottom 10px
    background $csOrange
    &#questions
      background $csBlue
    &#chat
      background $csPurple
    &#addPlayer
      background $csGreen
    &#startStop
      background $csOrange
  .output
    .allChat
      font-family $buttonFont
      p
        margin 20px 0
      .time
        color white
        font-size .8em
        padding 11px 7px 7px 7px
        background $csGray
      .who
          padding 5px
          color white
          font-size 1.2em
          background $csPurple
      p:nth-of-type(even)
        .what
          padding 5px
          color white
          font-size 1.2em
          background $csBlue
      p:nth-of-type(odd)
        .what
          padding 5px
          color white
          font-size 1.2em
          background $csGreen

    .question
      margin 0
      margin-top 20px
      color white
      font-family $buttonFont
      &.answer-toggle
        cursor pointer
      p
        color white
        padding 10px
        margin 0
      .answers
        background $csLightGray
        color black
      .player-name
        font-weight bold

    .answer
      position relative
      margin 0
      background $csLightGray
      font-family $buttonFont
      color black
      p
        padding 10px
        margin-right 60px
      .extras
        position absolute
        right 10px
        top 10px
        i
          color $csGray
          margin 5px

  .deletePlayer
    margin-top -10px
    margin-left 10px
p.level0
  background $csGreen
p.level1
  background $csPurple
p.level2
  background $csBlue
p.level3
  background $csOrange

#admin-npcs
  h3
    font-size 1.4em
    margin-top 0
  label
    color white
    display block
    margin-top 10px
    font-weight normal
  small
    color rgba(255,255,255,0.75)
    font-size 0.85em
    margin-left 8px
  input, textarea
    border 2px solid $csGray
    background white !important
  input
    &.number
      width 65px
      margin-right 6px
      text-align center
  textarea
    padding 10px
    height 95px
    width 100%
    &.possible, &.answer
      width 45%
      margin-right 20px
  .npc-actions
    margin-top 20px
  .npc-delete-button, .npc-cancel-button
    position absolute
    right 20px
  .npc
    margin 20px 0
    color white
    position relative
    user-select none
    .information, .resource, .smalltalk, .prompts, .skinSuit, .options
      position relative
      padding 20px
    .information
      background $csLightGray
      color $csBlack
      height 90px
      .sprite
        position absolute
        width 32px
        height 64px
        top 16px
        background-repeat no-repeat
        .sprite-controls
          position absolute
          top 6px
          left 45px
          font-size 1.5em
          color $csGray
          i
            cursor pointer
            &:hover
              color $csOrange
      .npc-basic-info
        position absolute
        left 100px
        top 28px
        .name
          width 150px
        input
          font-size 1.4em
          font-weight bold
        label
          display inline-block
          margin 0 10px
          font-size 1.3em
          line-height 1.6
          font-family $bodyFont
          color $csBlack
    .resource
      background $csGreen
      .view-resource-button
        position absolute
        right 20px
        top 20px
        background $csPurple
      .questionType
        display inline-block
        margin-left 20px
        input
          display inline-block
        label
          display inline-block
          margin 0 10px 0 6px
          color rgba(255,255,255,0.75)
          font-size 0.85em
    .smalltalk
      background $csOrange
    .prompts
      background $csBlue
    .skinSuit
      background $csLightGreen
    .options
      background $csPurple
  .npc-template
    display none

.resource-viewport-container
  display none
  position fixed
  top 50%
  left 50%
  margin-left -400px
  margin-top -200px
  width 800px
  height 400px
  overflow auto
  background $cloudUrl('img/bg/grey.png')
  border-radius 5px
  z-index 60
  .resource-viewport
    padding 2em
    margin-top 40px
    overflow-x auto
    position absolute
    top 0
    left 0
    bottom 0
    right 0
  .resource-control-panel
    position absolute
    top 0
    left 0
    right 0
    padding 1em
    border-bottom 2px solid $csGray
    background $csLightGray
    z-index 20
  iframe
    margin 0 auto
  section
    padding-top 1em
    padding-bottom 1em
  section:not(:first-of-type)
    position relative
    border-top 3px solid $csLightGray
    padding-top 2em
    &::before
      content '(page break)'
      position absolute
      top 0.25em
      width 100%
      text-align center
      font-family $buttonFont
      font-size 0.9em
      color $csGray

.resource-overlay
  position fixed
  display none
  top 0
  left 0
  right 0
  bottom 0
  background rgba(0,0,0,0.7)
  z-index 50
  cursor pointer

.npc-admin-level-filter
  position fixed
  top 176px
  left 0px
  margin 0
  padding 0
  background rgba(100,100,100,0.5)
  div
    margin 0
    padding 10px 20px
    border 2px solid #fff
    text-align right
    font-family $buttonFont
    font-size 1.5em
    color #fff
    cursor pointer
  .current
    background $csOrange
    &:hover
      background $csLightOrange