214 lines
3.0 KiB
CSS
214 lines
3.0 KiB
CSS
body {
|
|
height: 100vh;
|
|
/*overflow: hidden;*/
|
|
overflow-x: hidden;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0;
|
|
}
|
|
|
|
.background {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: -1;
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
#games {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.footer {
|
|
margin-top: -5px;
|
|
display: flex;
|
|
align-items: center;
|
|
color: white;
|
|
height: 5vh;
|
|
}
|
|
|
|
.board {
|
|
width: 90vw;
|
|
height: 90vh;
|
|
margin: 1vh;
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
height: 4vh;
|
|
margin: 0;
|
|
justify-content: center;
|
|
}
|
|
|
|
.left {
|
|
justify-content: flex-start;
|
|
width: 10%;
|
|
align-items: center;
|
|
display: inherit;
|
|
}
|
|
|
|
.right {
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
width: 10%;
|
|
display: flex;
|
|
}
|
|
|
|
.right2 {
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
width: 50vw;
|
|
display: flex;
|
|
}
|
|
|
|
.center {
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 80%;
|
|
display: flex;
|
|
color: white;
|
|
}
|
|
|
|
.spacer {
|
|
margin-left: 3vw;
|
|
margin-right: 3vw;
|
|
}
|
|
|
|
|
|
.left_player {
|
|
color: white;
|
|
writing-mode: vertical-lr;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 35vh;
|
|
width: 3vw;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.right_player {
|
|
color: white;
|
|
writing-mode: vertical-lr;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 25vh;
|
|
width: 3vw;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.player0 {
|
|
border: solid 3px blue;
|
|
}
|
|
|
|
.player1 {
|
|
border: solid 3px yellow;
|
|
}
|
|
|
|
.player-1 {
|
|
border: solid 3px black;
|
|
}
|
|
|
|
.viewer_controls {
|
|
margin: 0 -0.3vw 0 -0.3vw;
|
|
width: 101%;
|
|
}
|
|
|
|
|
|
.gridTile {
|
|
box-sizing: border-box;
|
|
color: white;
|
|
font-size: 1em;
|
|
}
|
|
|
|
.SubLine {
|
|
height: 20%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.gridLine {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
}
|
|
|
|
.column {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.subTile {
|
|
width: 20%;
|
|
height: 100%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.button {
|
|
font-size: 1em;
|
|
width: fit-content;
|
|
padding: 5px;
|
|
margin: 3px 5px 3px 5px;
|
|
border: 1px solid #ececec;
|
|
border-radius: 10px;
|
|
color: white;
|
|
}
|
|
|
|
.button:hover {
|
|
background: #ececec;
|
|
color: black;
|
|
}
|
|
|
|
.interactable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
#jsonData {
|
|
font-size: 1em;
|
|
overflow-y: hidden;
|
|
overflow-x: scroll;
|
|
transition: font-size 500ms cubic-bezier(1, 1, 1, 1);
|
|
margin: 0.1vw;
|
|
border: 1px solid rgba(169, 169, 169, 0.67);
|
|
padding: 0.2vw;
|
|
}
|
|
|
|
.closed#jsonData {
|
|
font-size: 0 !important;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.tileImg {
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 0;
|
|
margin-top: -100%;
|
|
}
|
|
|
|
.hidden {
|
|
opacity: 0;
|
|
}
|
|
|
|
/*#jsonData {*/
|
|
/* position: absolute;*/
|
|
/* top: 100vh;*/
|
|
/*}*/ |