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.
257 lines
4.5 KiB
Sass
257 lines
4.5 KiB
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% 80% 10% !important
|
|
|
|
#players-container, #chat-container
|
|
display: none !important
|
|
padding: 0
|
|
|
|
#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
|
|
|
|
@media(min-device-width: 641px)
|
|
textarea
|
|
height: 80%
|
|
width: 50%
|
|
#words-container
|
|
width: 100%
|
|
height: 100%
|
|
|
|
.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
|
|
margin: 1rem
|
|
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: 100%
|
|
border: 1px solid $inactive
|
|
margin: 0 0.5rem
|
|
word-break: break-word
|
|
|
|
#chat-content
|
|
height: calc(100% - 3.5rem)
|
|
background-color: $primary
|
|
overflow: auto
|
|
|
|
.chatMessage
|
|
display: list-item
|
|
padding: 0.2rem
|
|
|
|
.chatUsername
|
|
color: $inactive
|
|
|
|
.ERROR
|
|
color: $error
|
|
|
|
.INFO
|
|
color: $inactive
|
|
font-style: italic
|
|
|
|
#chat-input
|
|
width: 100%
|
|
margin: 1rem 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)
|