mirror of https://github.com/Trivernis/whooshy.git
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
223 lines
3.9 KiB
Sass
223 lines
3.9 KiB
Sass
@import ../mixins
|
|
@import ../vars
|
|
|
|
//@media(max-device-width: 641px)
|
|
|
|
//@media(min-device-width: 641px)
|
|
|
|
.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
|
|
grid-template: 60% 40% / 100%
|
|
|
|
h1
|
|
@include gridPosition(1, 2, 1, 1)
|
|
|
|
button
|
|
margin: 1rem
|
|
font-size: 2rem
|
|
@include gridPosition(2, 3, 1, 1)
|
|
|
|
.greyover
|
|
width: 100%
|
|
height: 100%
|
|
position: fixed
|
|
z-index: 99
|
|
top: 0
|
|
left: 0
|
|
background-color: rgba(0, 0, 0, 0.5)
|
|
|
|
.playerEntryContainer
|
|
@include default-element
|
|
padding: 0.5rem
|
|
margin: 0 0 1rem
|
|
width: calc(100% - 1rem - 2px)
|
|
border-radius: 0
|
|
color: $primarySurface
|
|
border: 1px solid $inactive
|
|
|
|
.chatMessage
|
|
display: block
|
|
padding: 0.2em
|
|
|
|
.INFO
|
|
font-style: italic
|
|
color: $inactive
|
|
|
|
.ERROR
|
|
font-weight: bold
|
|
color: $error
|
|
|
|
.chatUsername
|
|
color: $inactive
|
|
|
|
#container-chat
|
|
height: calc(100% - 2px)
|
|
#chat-content
|
|
height: calc(100% - 3rem)
|
|
width: calc(100% - 2px)
|
|
overflow-y: auto
|
|
border: 1px solid $inactive
|
|
box-shadow: inset 0 0 1rem $primary
|
|
#chat-input
|
|
width: 100%
|
|
height: 3rem
|
|
|
|
#container-lobby-settings
|
|
height: 100%
|
|
|
|
h1
|
|
height: 3rem
|
|
margin: 0.5rem
|
|
text-align: center
|
|
|
|
#input-bingo-words
|
|
width: 100%
|
|
height: calc(100% - 7rem)
|
|
margin: 0
|
|
|
|
#button-round-start, #button-leave
|
|
height: 3rem
|
|
width: 100%
|
|
|
|
#bingo-words
|
|
padding: 1rem
|
|
width: calc(100% - 2rem)
|
|
height: calc(100% - 9rem)
|
|
margin: 0
|
|
overflow-y: auto
|
|
box-shadow: inset 0 0 1rem $primary
|
|
|
|
.bingoWord
|
|
display: list-item
|
|
list-style: none
|
|
|
|
#container-players
|
|
height: 100%
|
|
width: 100%
|
|
|
|
h1
|
|
height: 3rem
|
|
margin: 0.5rem
|
|
text-align: center
|
|
|
|
#player-list
|
|
padding: 1rem
|
|
width: calc(100% - 2rem)
|
|
height: calc(100% - 6rem)
|
|
overflow-y: auto
|
|
|
|
#container-grid
|
|
display: table
|
|
height: calc(100% - 2em)
|
|
width: calc(100% - 2em)
|
|
padding: 1em
|
|
|
|
.bingoWordRow
|
|
display: table-row
|
|
|
|
.bingoWordPanel
|
|
@include default-element
|
|
display: table-cell
|
|
text-align: center
|
|
vertical-align: middle
|
|
user-select: none
|
|
cursor: pointer
|
|
|
|
.bingoWordPanel[b-sub='true']
|
|
background-color: $success
|
|
|
|
.bingoWordPanel:hover
|
|
background-color: $primary
|
|
|
|
.bingoWordPanel[b-sub='true']:hover
|
|
background-color: mix($primary, $success)
|
|
|
|
.bingoWordPanel:active
|
|
background-color: mix($primary, $secondary)
|
|
|
|
#container-bingo-button
|
|
height: 100%
|
|
width: 100%
|
|
|
|
button
|
|
height: 100%
|
|
width: 100%
|
|
|
|
/* main containers */
|
|
|
|
#container-bingo-create
|
|
display: grid
|
|
grid-template: 5% 10% 10% 70% 5% /10% 80% 10%
|
|
height: 100%
|
|
width: 100%
|
|
|
|
#username-form
|
|
@include gridPosition(2, 3, 2, 3)
|
|
margin: auto
|
|
|
|
.statusIndicator
|
|
height: 1em
|
|
width: 1em
|
|
display: inline-block
|
|
margin: auto 1em
|
|
|
|
#input-username
|
|
margin: 0 0 0 3em
|
|
|
|
#lobby-form
|
|
@include gridPosition(3, 4, 2, 3)
|
|
margin: auto
|
|
|
|
button
|
|
width: 100%
|
|
|
|
#container-bingo-lobby
|
|
display: grid
|
|
grid-template: 5% 5% 85% 5% / 5% 30% 30% 30% 5%
|
|
height: 100%
|
|
width: 100%
|
|
|
|
#lobby-title
|
|
@include gridPosition(2, 3, 2, 5)
|
|
margin: auto
|
|
|
|
#container-players
|
|
@include gridPosition(3, 4, 2, 3)
|
|
background-color: lighten($primary, 5%)
|
|
|
|
#container-lobby-settings
|
|
@include gridPosition(3, 4, 3, 4)
|
|
background-color: lighten($primary, 5%)
|
|
|
|
#container-chat
|
|
@include gridPosition(3, 4, 4, 5)
|
|
background-color: lighten($primary, 5%)
|
|
|
|
#container-bingo-round
|
|
display: grid
|
|
height: 100%
|
|
width: 100%
|
|
grid-template: 10% 42.5% 42.5% 5% / 25% 75%
|
|
|
|
#container-players
|
|
@include gridPosition(2, 3, 1, 2)
|
|
|
|
#container-chat
|
|
@include gridPosition(3, 4, 1, 2)
|
|
|
|
#container-grid
|
|
@include gridPosition(2, 4, 2, 3)
|
|
|
|
#container-bingo-button
|
|
@include gridPosition(1, 2, 1, 2)
|