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.
157 lines
2.6 KiB
Sass
157 lines
2.6 KiB
Sass
@import ../mixins
|
|
@import ../vars
|
|
|
|
button
|
|
margin: 1rem
|
|
|
|
textarea
|
|
@include default-element
|
|
display: block
|
|
margin: 1rem
|
|
border-radius: 0
|
|
font-size: 0.8em
|
|
|
|
@media(max-device-width: 641px)
|
|
textarea
|
|
height: 80%
|
|
width: calc(100% - 2rem)
|
|
#words-container
|
|
width: 100%
|
|
height: 80%
|
|
#content-container #row-1 #players-container div
|
|
display: none
|
|
padding: 0
|
|
#username-form
|
|
width: calc(100% - 2rem) !important
|
|
left: 0 !important
|
|
#hide-player-container-button
|
|
display: none
|
|
|
|
@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
|
|
|
|
span
|
|
vertical-align: middle
|
|
display: inline-block
|
|
word-break: break-word
|
|
|
|
.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: table
|
|
height: 100%
|
|
width: 100%
|
|
|
|
#row-1
|
|
display: table-row
|
|
height: 85%
|
|
|
|
#players-container
|
|
display: table-cell
|
|
padding: 0.5rem
|
|
transition-duration: 1s
|
|
|
|
.player-container
|
|
@include default-element
|
|
padding: 0.5rem
|
|
max-width: 14rem
|
|
|
|
.popup
|
|
@include default-element
|
|
height: 5%
|
|
width: 40%
|
|
top: 47.5%
|
|
left: 30%
|
|
text-align: center
|
|
transition-duration: 1s
|
|
span
|
|
margin: 2%
|
|
display: block
|
|
|
|
.greyover
|
|
width: 100%
|
|
height: 100%
|
|
position: fixed
|
|
z-index: 99
|
|
top: 0
|
|
left: 0
|
|
background-color: transparentize($primary, 0.5)
|