Selectable: remove border box

This commit is contained in:
djmil 2023-11-14 13:21:26 +01:00
parent 907be9cbc0
commit 9439186b8a
2 changed files with 27 additions and 18 deletions

View File

@ -3,13 +3,25 @@
overflow-y: scroll;
}
.Selectable {
border: 1px solid black;
margin-bottom: 5px;
hr {
border: 0;
height: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
margin-bottom: 2px;
margin-top: 3px;
}
.Selectable q {
color: gray;
font-size: 70%;
max-width: 250px;
display: block;
white-space: nowrap;
overflow: scroll;
padding-bottom: 2px;
}
.Selectable i {
@ -20,20 +32,14 @@
.Selectable:hover {
background-color: #d3d3d360;
}
border-radius: 2px;
/* .Games .li button.action {
display: none;
}
.Games .li:hover button.action {
display: initial;
} */
.Separator {
/* width: 20%; */
/* height: 20px; */
border-bottom: 1px dotted black;
border-bottom: 1px dotted black;
text-align: center;
font-size: 50%;
padding-left: 50%;
@ -45,4 +51,4 @@
flex-direction: row;
align-items: center;
justify-content: center;
}
}

View File

@ -32,13 +32,16 @@ function Selectable({ game, onClick }) {
const opponentName = game.opponentName;
return (
<div className='Selectable' onClick={() => onClick(game.uuid)}>
<div className='Title'>
<Player color={myColor} />
<i>vs</i>
<Player color={opponentColor} name={opponentName} />
<div >
<div className='Selectable' onClick={() => onClick(game.uuid)}>
<div className='Title'>
<Player color={myColor} />
<i>vs</i>
<Player color={opponentColor} name={opponentName} />
</div>
<q>{game.message}</q>
</div>
<q>{game.message}</q>
<hr />
</div>
)
};