You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
217 lines
3.9 KiB
217 lines
3.9 KiB
#wrapper {
|
|
height: 100%;
|
|
width: 100%;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
overflow: hidden;
|
|
overflow-y: scroll;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: #333333;
|
|
color: #204a61;
|
|
font-family:'Roboto',sans-serif;
|
|
}
|
|
|
|
.top-level-container {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Styles for top-level component */
|
|
.top-level-component .game-boards-container {
|
|
display: flex;
|
|
}
|
|
|
|
.top-level-component .game-boards-container .game-board {
|
|
margin-right: 50px;
|
|
}
|
|
|
|
.game-board-component .grid-container .grid-row {
|
|
display: flex;
|
|
}
|
|
|
|
.game-board-component .grid-container .grid-row .label {
|
|
margin-right: 5px;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.shipBtn{
|
|
background-color: #327da8;
|
|
color: white;
|
|
padding: 5px 12px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* Styles for the various grid cell states. */
|
|
|
|
.game-board-cell-component {
|
|
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 1px solid grey;
|
|
}
|
|
|
|
.game-board-cell-component.available {
|
|
background: #327da8;
|
|
}
|
|
|
|
.game-board-cell-component.available:hover {
|
|
background: #3261a8;
|
|
}
|
|
|
|
.game-board-cell-component.disabled {
|
|
background: #cccccc;
|
|
}
|
|
|
|
.game-board-cell-component.disabled:hover {
|
|
background: #bbbbbb;
|
|
}
|
|
|
|
.game-board-cell-component.ship {
|
|
background: #414141;
|
|
}
|
|
|
|
.game-board-cell-component.damaged {
|
|
background: #dd0000;
|
|
}
|
|
|
|
.game-board-cell-component.sunk {
|
|
background: #000000;
|
|
}
|
|
|
|
.game-board-cell-component.missed {
|
|
background: #ffbbbb;
|
|
}
|
|
|
|
.game-board-cell-component.ghost {
|
|
background: #507090;
|
|
}
|
|
|
|
.column_labels {
|
|
display: flex;
|
|
margin-top: 5px;
|
|
margin-left: 15px;
|
|
}
|
|
|
|
.column_labels .label {
|
|
width: 42px;
|
|
text-align: center;
|
|
}
|
|
|
|
h1 {
|
|
text-align:center;
|
|
}
|
|
|
|
p {
|
|
text-align: center;
|
|
}
|
|
|
|
.top-level-component {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
}
|
|
|
|
.top-level-component .instructions {
|
|
margin: 20px;
|
|
}
|
|
|
|
/*******************************************
|
|
************** SCOREBOARD CSS **************
|
|
********************************************/
|
|
|
|
.app-scoreboard-component {
|
|
|
|
}
|
|
|
|
.scoreboard_table {
|
|
border-collapse: collapse;
|
|
text-align: center;
|
|
margin: auto;
|
|
font-size: 0.9em;
|
|
min-width: 400px;
|
|
font-weight: bold;
|
|
font-family:'Roboto',sans-serif;
|
|
border-radius: 15px 15px 7px 7px;
|
|
overflow: hidden;
|
|
box-shadow: 0 0 20px rgba(0, 0, 0, 0.70);
|
|
}
|
|
|
|
.scoreboard_table_header {
|
|
padding: 30px;
|
|
background-color: #204a61;
|
|
color: #ffffff;
|
|
border-bottom: 1px solid #dddddd;
|
|
font-size: 17px;
|
|
}
|
|
|
|
.scoreboard_header_scoreProgress {
|
|
border-collapse: collapse;
|
|
padding: 15px;
|
|
border-bottom: 1px solid #dddddd;
|
|
background-color: #f3f3f3;
|
|
color: #204a61;
|
|
}
|
|
.scoreboard_emptyCells {
|
|
background-color: #333333;
|
|
}
|
|
|
|
.scoreboard_scoreProgress {
|
|
border-collapse: collapse;
|
|
padding: 15px;
|
|
border-bottom: 1px solid #dddddd;
|
|
}
|
|
|
|
.scoreboard_player {
|
|
border-collapse: collapse;
|
|
padding: 15px;
|
|
border-bottom: 1px solid #dddddd;
|
|
}
|
|
|
|
.scoreboard_lastRow {
|
|
border-collapse: collapse;
|
|
padding: 15px;
|
|
border-bottom: 5px solid #204a61;
|
|
}
|
|
|
|
.scoreboard_data {
|
|
border-collapse: collapse;
|
|
padding: 15px;
|
|
border-bottom: 1px solid #dddddd;
|
|
}
|
|
|
|
/*******************************************
|
|
************** END SCOREBOARD CSS **************
|
|
********************************************/
|
|
|
|
.game-player-change-container, .game-choose-ships-container {
|
|
height: calc(40px * 9);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.playerBtn {
|
|
background-color: #327da8;
|
|
color: white;
|
|
padding: 5px 12px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
font-size: 12px;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.fleet-label {
|
|
text-align: center;
|
|
margin: 20px;
|
|
}
|