149 lines
2.3 KiB
CSS
Executable File
149 lines
2.3 KiB
CSS
Executable File
.Board {
|
|
display: inline-block;
|
|
position: absolute;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
height: 100%;
|
|
}
|
|
|
|
.Display {
|
|
display: inline-block;
|
|
position: absolute;
|
|
}
|
|
|
|
.Cards {
|
|
display: inline-block;
|
|
position: absolute;
|
|
text-align: right;
|
|
vertical-align: bottom;
|
|
padding: 0.5em;
|
|
box-sizing: border-box;
|
|
max-height: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.Stack {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.Stack:not(:first-child) {
|
|
margin-left: -3em;
|
|
transition: margin-left 1s ease-in-out 0.25s;
|
|
}
|
|
|
|
.Stack > * {
|
|
transition: margin-left 1s ease-in-out 0.25s, margin-right 1s ease-in-out 0.25s;
|
|
}
|
|
|
|
.Development:hover,
|
|
.Placard:hover,
|
|
.Resource:hover {
|
|
filter: brightness(150%);
|
|
}
|
|
|
|
.Game {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
width: 20em;
|
|
opacity: 0.7;
|
|
z-index: 100;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.Game > *:not(:last-child) {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
.Chat {
|
|
padding: 0.5em;
|
|
}
|
|
|
|
.Chat > * {
|
|
width: 100%;
|
|
}
|
|
|
|
.Chat > :first-child {
|
|
max-height: 30vh;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.Players {
|
|
padding: 0.5em;
|
|
}
|
|
|
|
.PlayerName {
|
|
padding: 0.5em;
|
|
}
|
|
|
|
#ChatList {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
.Players > * {
|
|
width: 100%;
|
|
}
|
|
|
|
.Players .nameInput {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.Stack > *:not(:first-child) {
|
|
margin-left: -4.5em;
|
|
}
|
|
|
|
.Hand {
|
|
min-height: calc(7.2em + 0.5em);
|
|
}
|
|
|
|
.Hand:hover .Stack:hover > *:not(:first-child) {
|
|
margin-left: -2em;
|
|
}
|
|
|
|
.Hand:hover .Stack:hover:not(:last-child) > *:last-child {
|
|
margin-right: 3em;
|
|
}
|
|
|
|
.Placard {
|
|
position: relative;
|
|
width: 9.4em;
|
|
height: 11.44em;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
margin: 0.25em;
|
|
display: inline-block;
|
|
}
|
|
|
|
.Development {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 4.9em;
|
|
height: 7.2em;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
margin: 0.25em;
|
|
}
|
|
|
|
.Resource {
|
|
position: relative;
|
|
width: 4.9em;
|
|
height: 7.2em;
|
|
display: inline-block;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
margin: 0.25em;
|
|
}
|
|
|
|
.Statistics > div:nth-child(2) {
|
|
display: flex;
|
|
flex-direction: row;
|
|
border: 1px solid black;
|
|
}
|
|
|
|
.Statistics div:nth-child(2) div {
|
|
padding: 0.25em 0.5em;
|
|
}
|