corda-checkers/webapp/src/container/Games.css
djmil aa2a250085 Games container sceleton
- use Route for conditional rendering
- useGamesAPI
- Checkers component
2023-11-08 18:22:05 +01:00

125 lines
2.1 KiB
CSS

.Games {
width: 100%;
float: left;
}
.Games .left-side {
float: left;
width: 45%;
/* max-width: 400px; */
/* height: 100px; */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.Games .right-side {
float: left;
width: 55%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.ViewSelector {
text-align: center;
margin-bottom: 10px;
background-color: lightgrey;
width: 100%;
padding-top: 8px;
padding-bottom: 8px;
color: black;
}
.ViewSelector a {
color: black;
text-decoration: none;
transition: .25s ease;
margin-left: 5px;
margin-right: 5px;
}
.ViewSelector .active {
color: white;
border-radius: 2px;
background-color: cadetblue;
opacity: 80%;
padding-top: 8px;
padding-bottom: 8px;
}
.ViewSelector a:hover:not(.active) {
color: cadetblue;
box-shadow: 0 1.5px 0 0 currentColor;
}
.ViewProvider {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.ActionPanel {
text-align: center;
margin-bottom: 10px;
height: 34.5px;
/* background-color: lightgrey; */
width: 100%;
/* padding-top: 8px;
padding-bottom: 8px; */
color: black;
padding-left: -10px;
/* */
margin-left: 10px;
border: 0.5px dotted lightslategray;
}
.ActionPanel button {
width:fit-content;
padding: 6px;
padding-left: 15px;
padding-right: 15px;
border-radius: 5px;
border: 0.5px solid darkgrey;
margin: 2px;
}
.ActionPanel .Create:hover, /* OR */
.game-action.busy
{
background-color:#00b0ff60;
}
.ActionPanel .Create.enabled:active {
background-color:#00b0ffa0;
}
.ActionPanel .Cancel:hover,
.ActionPanel .Reject:hover {
background-color:#ff000030
}
.ActionPanel .Cancel:active,
.ActionPanel .Reject:active {
background-color:#ff000080
}
.ActionPanel .Accept:hover {
background-color: #00af0030;
}
.ActionPanel .Accept:active {
background-color:#00af0080;
}