183 lines
3.4 KiB
Sass
183 lines
3.4 KiB
Sass
// Place all the styles related to the Game#show method here.
|
|
// They will automatically be included in application.css.
|
|
// You can use Sass (SCSS) here: http://sass-lang.com/
|
|
|
|
//#game-component
|
|
flex-grow: 3
|
|
background: hotpink
|
|
|
|
.players
|
|
display: inline-block
|
|
width: 40%
|
|
|
|
//// New Game#new
|
|
|
|
.simple_form
|
|
background: green
|
|
padding: 5vmin
|
|
outline: 2px solid black
|
|
label
|
|
font-size: 4vmin
|
|
display: block
|
|
input.string
|
|
font-size: 6vmin
|
|
margin-bottom: 2vmin
|
|
input.btn
|
|
font-size: 4vmin
|
|
|
|
//// Show Game#show
|
|
|
|
button,
|
|
input[type=submit]
|
|
font-size: 4vmin
|
|
|
|
#table-component,
|
|
#game-component-container-container
|
|
display: flex
|
|
flex-direction: column
|
|
flex: 1 1 auto
|
|
align-self: stretch
|
|
#game-component-container
|
|
flex: 1 1 auto
|
|
display: flex
|
|
|
|
#game-component
|
|
flex: 1 1 auto
|
|
flex-direction: column
|
|
align-self: stretch
|
|
display: flex
|
|
h1
|
|
font-size: 4vmin
|
|
#game-controls
|
|
display: flex
|
|
flex-direction: row
|
|
margin-bottom: 5vh
|
|
align-self: stretch
|
|
align-items: flex-start
|
|
div
|
|
flex: 1 1 auto
|
|
#start
|
|
align-self: flex-end
|
|
text-align: right
|
|
.player-list
|
|
display: flex
|
|
|
|
.player
|
|
background: green
|
|
padding: 2vmin
|
|
outline: 2px solid black
|
|
position: relative
|
|
&.has-control
|
|
background: lightgreen
|
|
|
|
#playerList
|
|
display: flex
|
|
flex-direction: row
|
|
flex-wrap: wrap
|
|
align-items: flex-start
|
|
text-align: center
|
|
#top
|
|
flex: 0 0 100%
|
|
display: flex
|
|
.player
|
|
flex: 1 1 auto
|
|
#mid
|
|
flex: 0 0 100%
|
|
align-self: center
|
|
align-items: flex-start
|
|
display: flex
|
|
.player
|
|
flex: 1 1 auto
|
|
.email
|
|
//position: absolute
|
|
//background: green
|
|
&:first-of-type
|
|
.email
|
|
//left: -18.5vmin
|
|
//transform: rotate(-90deg)
|
|
&:last-of-type
|
|
.email
|
|
//transform: rotate(90deg)
|
|
//right: -17vmin
|
|
#play-to-beat
|
|
flex: 1 1 auto
|
|
#bot
|
|
flex: 0 0 100%
|
|
align-self: flex-end
|
|
|
|
////// Cards to beat
|
|
|
|
ol#cards-to-beat
|
|
//display: flex
|
|
flex-wrap: wrap
|
|
text-align: center
|
|
li
|
|
position: relative
|
|
margin-left: -21vmin
|
|
// Don't offset first card
|
|
&:first-of-type
|
|
margin-left: -4vmin
|
|
flex: 1 1 auto
|
|
//flex: 1 1 auto
|
|
text-align: center
|
|
display: inline-block
|
|
img
|
|
width: 16vmin
|
|
border: 1px solid black
|
|
border-radius: .3vmin
|
|
|
|
|
|
////// Inventory
|
|
|
|
.player
|
|
&.taking-turn
|
|
font-weight: bold
|
|
box-shadow: 0px 0px .5vmin 1vmin inset rgba(white,0.2)
|
|
ul#inventory
|
|
display: flex
|
|
flex-wrap: wrap
|
|
text-align: left
|
|
li
|
|
margin-left: -21vmin
|
|
// Don't offset first card
|
|
&:first-of-type
|
|
// margin-left: 0
|
|
margin-left: -4vmin
|
|
flex: 1 1 auto
|
|
input[type="checkbox"]
|
|
visibility: hidden
|
|
position: absolute
|
|
&:checked ~ img
|
|
box-shadow: 0px 0px 2px 6px #00dd84
|
|
margin-top: -2vmin
|
|
img
|
|
width: 26vmin
|
|
border: 1px solid black
|
|
border-radius: 1.2vmin
|
|
transition: margin-top ease-out .24s
|
|
|
|
#mid
|
|
ul#inventory
|
|
margin-left: 8vmin
|
|
li
|
|
margin-left: -8vmin
|
|
// Don't offset first card
|
|
&:first-of-type
|
|
// margin-left: -0vmin
|
|
img
|
|
width: 16vmin
|
|
|
|
.inventory
|
|
text-align: left
|
|
|
|
.inventory
|
|
text-align: center
|
|
img
|
|
width: 6vmin
|
|
border: 2px solid black
|
|
border-radius: .3vmin
|
|
margin-left: -2vmin
|
|
// Don't offset first card
|
|
&:first-of-type
|
|
// margin-left: 0vmin
|