whooshy/public/stylesheets/sass/bingo/style.sass

@import ../mixins
@import ../vars

textarea
  @include default-element
  display: block
  margin: 1rem
  border-radius: 0
  font-size: 0.8em
  background-color: lighten($primary, 15%)

#word-count
  margin: 1rem

@media(max-device-width: 641px)
  textarea
    height: 80%
    width: calc(100% - 2rem)
  #words-container
    width: 100%
    height: 80%
  #content-container
    grid-template-columns: 0 100% !important
    grid-template-rows: 10% 40% 40% 10% !important

    #players-container, #chat-container
      display: none !important
      padding: 0

    .errorDiv
      grid-column-start: 1 !important
      grid-column-end: 4 !important

  #content-container.displayChat
    grid-template-columns: 100% 0 !important
    grid-template-rows: 0 25% 65% 10% !important

    #players-container, #chat-container
      display: block !important

    #words-container
      display: none !important

  #username-form
    width: calc(100% - 2rem) !important
    left: 0 !important

  #hide-player-container-button
    display: none

  .popup
    width: calc(100% - 2rem) !important
    left: 0 !important

  #button-container
    grid-column-start: 2 !important
    grid-column-end: 3 !important

  #chat-button-container
    display: inline-block
    grid-row-start: 4
    grid-row-end: 4
    grid-column-start: 1
    grid-column-end: 4
    overflow: hidden
    margin: 0 0.5rem

    button
      width: 100%
      margin: 0.5rem 0

  #chat-container .chatMessage
    font-size: 1.2em

@media(min-device-width: 641px)
  textarea
    height: 80%
    width: 50%
  #words-container
    width: 100%
    height: 100%
  #chat-button-container
    display: none

.number-input
  width: 4rem
  margin: 1rem

#bingoheader
  display: table
  width: 100%

  div
    display: table-cell
    text-align: start

  .stretchDiv
    text-align: end

  button
    max-width: calc(100% - 2rem)
    padding: 0.7rem 2rem

#words-container
  display: table

  .bingo-word-row
    display: table-row

    .bingo-word-panel
      @include default-element
      display: table-cell
      padding: 1rem
      transition-duration: 0.3s
      max-width: 15rem
      border-radius: 0
      border-collapse: collapse
      text-align: center
      vertical-align: middle
      user-select: none

      span
        vertical-align: middle
        display: inline-block
        word-break: break-word
        user-select: none

    .bingo-word-panel:hover
      background-color: darken($primary, 2%)
      cursor: pointer

    .bingo-word-panel:active
      background-color: $primary

    .bingo-word-panel[b-sub="true"]
      background-color: forestgreen

#bingo-button
  transition-duration: 0.8s

#username-form
  @include default-element
  position: fixed
  display: block
  height: calc(50% - 1rem)
  width: calc(40% - 1rem)
  top: 25%
  left: 30%
  text-align: center
  vertical-align: middle
  padding: 1rem
  z-index: 1000

  button
    cursor: pointer
    width: 100%
    margin: 1rem auto

  input[type='text']
    cursor: text
    width: 100%

#username-form *
  display: inline-block
  vertical-align: middle

#content-container
  display: grid
  grid-template-columns: 25% 75%
  grid-template-rows: 10% 40% 40% 10%
  height: 100%
  width: 100%

  div
    overflow: auto

  #button-container
    grid-column-start: 1
    grid-column-end: 1
    grid-row-start: 1
    grid-row-end: 1
    display: grid
    font-size: inherit

    button
      font-size: inherit
      padding: 0

  #players-container
    padding: 0 0.5rem
    transition-duration: 1s
    grid-column-start: 1
    grid-column-end: 1
    grid-row-start: 2
    grid-row-end: 3

    h1
      margin: 0 0 1rem 0

  #words-container
    grid-column-start: 2
    grid-column-end: 3
    grid-row-start: 2
    grid-row-end: 4

  #chat-container
    grid-column-start: 1
    grid-column-end: 1
    grid-row-start: 3
    grid-row-end: 4
    height: calc(100% - 3px)
    border: 1px solid $inactive
    margin: 0 0.5rem
    word-break: break-word

    #chat-content
      height: calc(100% - 2.5rem)
      background-color: $primary
      overflow: auto
      font-size: 0.8em

      .chatMessage
        display: list-item
        padding: 0.2rem

        .chatUsername
          color: $inactive

        .ERROR
          color: $error

        .INFO
          color: $inactive
          font-style: italic

        .chatMessageContent
          img
            width: 100%
            height: auto
            transition-duration: 0.5s
            border-radius: 0.5em
          img:hover
            border-radius: 0

    #chat-input
      width: 100%
      margin: 0 0 0 0
      height: 2.5rem
      border-radius: 0

  .errorDiv
    grid-column-start: 2
    grid-column-end: 3
    grid-row-start: 4
    grid-row-end: 4
    background-color: $error
    text-align: center
    margin: 0.75rem 0
    border-radius: 1rem
    height: calc(100% - 1.5rem)
    display: table

    span
      display: table-cell
      font-size: 1.8rem
      vertical-align: middle

.player-container
  @include default-element
  padding: 0.5rem
  margin: 0 0 1rem 0
  max-width: 14rem
  border-radius: 0
  color: $primarySurface
  border: 1px solid $inactive

.popup
  @include default-element
  position: fixed
  display: grid
  height: calc(50% - 1rem)
  width: calc(40% - 1rem)
  top: 25%
  left: 30%
  text-align: center
  vertical-align: middle
  padding: 1rem
  z-index: 1000

  button
    margin: 1rem
    font-size: 2rem

.greyover
  width: 100%
  height: 100%
  position: fixed
  z-index: 99
  top: 0
  left: 0
  background-color: rgba(0, 0, 0, 0.5)