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.
338 lines
6.2 KiB
Sass
338 lines
6.2 KiB
Sass
@import ../mixins
|
|
@import ../vars
|
|
|
|
@media(max-device-height: 500px)
|
|
div#container-winner
|
|
margin: 5% auto !important
|
|
|
|
@media(max-device-width: 600px)
|
|
div#container-bingo-lobby
|
|
grid-template: 0 10% 85% 5% / 0 0 0 100% 0 !important
|
|
|
|
div#container-lobby-settings
|
|
display: none !important
|
|
|
|
div#container-players
|
|
display: none !important
|
|
|
|
|
|
//@media(min-device-width: 641px)
|
|
|
|
.popup
|
|
position: fixed
|
|
top: 0
|
|
left: 0
|
|
height: 100%
|
|
width: 100%
|
|
z-index: 1000
|
|
|
|
|
|
#container-winner
|
|
@include default-element
|
|
position: relative
|
|
margin: 20% auto
|
|
text-align: center
|
|
width: 50%
|
|
|
|
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
|
|
position: relative
|
|
|
|
.playerWins
|
|
position: absolute
|
|
right: 0
|
|
|
|
.kickPlayerButton
|
|
color: $inactive
|
|
|
|
.chatMessage
|
|
display: block
|
|
padding: 0.2em
|
|
word-break: break-word
|
|
|
|
.INFO
|
|
font-style: italic
|
|
color: $inactive
|
|
|
|
.ERROR
|
|
font-weight: bold
|
|
color: $error
|
|
|
|
.chatUsername
|
|
color: $inactive
|
|
|
|
img
|
|
max-width: 100%
|
|
height: auto
|
|
border-radius: 0.2em
|
|
|
|
.chatMessage.selected
|
|
background-color: lighten($primary, 15%)
|
|
|
|
#container-chat
|
|
height: calc(100% - 2px)
|
|
position: relative
|
|
#chat-content
|
|
height: calc(100% - 3rem)
|
|
width: calc(100% - 2px)
|
|
overflow-y: auto
|
|
overflow-x: hidden
|
|
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% - 10rem)
|
|
margin: 0
|
|
|
|
#input-grid-size
|
|
height: 3rem
|
|
width: 4rem
|
|
|
|
#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: 2rem
|
|
margin: 0.5rem
|
|
text-align: center
|
|
|
|
#player-list
|
|
padding: 1rem
|
|
width: calc(100% - 2rem)
|
|
height: calc(100% - 5rem)
|
|
overflow-y: auto
|
|
|
|
.kickPlayerButton
|
|
background-color: #0000
|
|
border: none
|
|
padding: 0
|
|
margin: 0 0.5rem 0 0
|
|
font-size: 1em
|
|
|
|
#container-grid
|
|
height: calc(100% - 2em)
|
|
width: calc(100% - 2em)
|
|
padding: 1em
|
|
overflow: auto
|
|
|
|
#grid-table
|
|
display: table
|
|
height: 100%
|
|
width: 100%
|
|
.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%
|
|
|
|
#statusbar
|
|
display: grid
|
|
grid-template: 100% 0 / 1rem calc(75% - 1rem) 25%
|
|
background-color: darken($primary, 5%)
|
|
margin: 0.5rem 0 0 0
|
|
padding: 0.25rem
|
|
vertical-align: middle
|
|
font-size: 0.8em
|
|
text-align: start
|
|
position: absolute
|
|
height: 1rem
|
|
bottom: 0
|
|
left: 0
|
|
width: calc(100% - 0.5rem)
|
|
|
|
#status-indicator
|
|
height: 1rem
|
|
width: 1rem
|
|
border-radius: 100%
|
|
@include gridPosition(1, 2, 1,2)
|
|
|
|
#error-message
|
|
@include gridPosition(1, 2, 2, 3)
|
|
margin: auto 1em
|
|
text-align: start
|
|
color: $errorText
|
|
|
|
#container-info
|
|
@include gridPosition(1, 2, 3, 4)
|
|
text-align: left
|
|
width: 100%
|
|
height: 100%
|
|
margin: auto
|
|
color: $inactive
|
|
|
|
/* main containers */
|
|
|
|
#container-bingo-create
|
|
display: grid
|
|
grid-template: 5% 45% 45% 5% /5% 35% 5% 50% 5%
|
|
height: 100%
|
|
width: 100%
|
|
|
|
#username-form
|
|
@include gridPosition(2, 3, 2, 3)
|
|
margin: auto
|
|
position: relative
|
|
|
|
h2
|
|
text-align: center
|
|
margin: 0 0 1rem 0
|
|
|
|
> *
|
|
margin: auto
|
|
width: 100%
|
|
|
|
|
|
#submit-username[status='success']
|
|
background-color: $success
|
|
transition-duration: 1s
|
|
|
|
#submit-username[status='pending']
|
|
transition-duration: 1s
|
|
background-color: $pending
|
|
animation-name: pulse-opacity
|
|
animation-duration: 4s
|
|
animation-iteration-count: infinite
|
|
|
|
#lobby-form
|
|
@include gridPosition(3, 4, 2, 3)
|
|
margin: auto
|
|
width: 100%
|
|
|
|
button
|
|
width: 100%
|
|
margin: auto
|
|
|
|
button.inactive
|
|
background-color: lighten($primary, 10%)
|
|
|
|
#changelog
|
|
@include gridPosition(2, 4, 4, 5)
|
|
height: 100%
|
|
width: calc(100% - 2rem)
|
|
overflow-y: auto
|
|
margin: 0 0.5rem
|
|
padding: 0 0.5rem
|
|
box-shadow: inset 0 0 1rem darken($primary, 10%)
|
|
|
|
#container-bingo-lobby
|
|
@include fillWindow
|
|
overflow: hidden
|
|
display: grid
|
|
grid-template: 0 10% 85% 5% / 5% 30% 30% 30% 5%
|
|
height: 100%
|
|
width: 100%
|
|
|
|
#lobby-title
|
|
@include gridPosition(2, 3, 2, 5)
|
|
margin: 0.5rem 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
|
|
@include fillWindow
|
|
overflow: hidden
|
|
display: grid
|
|
height: 100%
|
|
width: 100%
|
|
grid-template: 10% 30% 55% 5% / 25% 75%
|
|
|
|
#container-players
|
|
@include gridPosition(2, 3, 1, 2)
|
|
|
|
#container-chat
|
|
@include gridPosition(3, 4, 1, 2)
|
|
padding: 0 1rem
|
|
|
|
#container-grid
|
|
@include gridPosition(2, 4, 2, 3)
|
|
|
|
#container-bingo-button
|
|
@include gridPosition(1, 2, 1, 2)
|