128 lines
2.3 KiB
CSS
128 lines
2.3 KiB
CSS
.PlayerList {
|
|
display: flex;
|
|
position: relative;
|
|
padding: 0.5em;
|
|
user-select: none;
|
|
flex-direction: column;
|
|
margin: 0.25rem 0.25rem 0.25rem 0;
|
|
}
|
|
|
|
.PlayerList .Name {
|
|
display: flex;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.PlayerList .NoNetwork {
|
|
display: flex;
|
|
justify-self: flex-end;
|
|
width: 1em;
|
|
height: 1em;
|
|
background-image: url("./assets/no-network.png");
|
|
background-size: contain;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.PlayerList .Unselected {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.PlayerList .Unselected > div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin: 0.25rem;
|
|
padding: 0.25rem;
|
|
max-width: 8rem;
|
|
width: 8rem;
|
|
text-overflow: ellipsis;
|
|
background-color: #eee;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.PlayerList .Unselected .Self {
|
|
border: 1px solid black;
|
|
}
|
|
|
|
.PlayerList .PlayerSelector .PlayerColor {
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
|
|
.PlayerList .PlayerSelector {
|
|
display: inline-flex;
|
|
flex-wrap: wrap;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.PlayerList .PlayerSelector.MuiList-padding {
|
|
padding: 0;
|
|
}
|
|
|
|
.PlayerList .PlayerSelector .MuiTypography-body1 {
|
|
font-size: 0.8rem;
|
|
/* white-space: nowrap;*/
|
|
}
|
|
|
|
.PlayerList .PlayerSelector .MuiTypography-body2 {
|
|
font-size: 0.7rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.PlayerList .PlayerSelector .PlayerEntry {
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-overflow: ellipsis;
|
|
flex: 1 1 0px;
|
|
align-items: flex-start;
|
|
border: 1px solid rgba(0,0,0,0);
|
|
border-radius: 0.25em;
|
|
min-width: 11em;
|
|
max-width: 11rem;
|
|
padding: 0.25rem;
|
|
}
|
|
|
|
.PlayerList .PlayerSelector .PlayerEntry > div {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
align-self: stretch;
|
|
}
|
|
|
|
.PlayerList .PlayerEntry[data-selectable=true]:hover {
|
|
border-color: rgba(0,0,0,0.5);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.PlayerList .PlayerEntry[data-selected=true] {
|
|
border: 1px solid black;
|
|
}
|
|
|
|
.PlayerList .PlayerSelector .PlayerEntry .MediaControl {
|
|
display: flex;
|
|
justify-self: flex-end;
|
|
align-self: center;
|
|
}
|
|
|
|
|
|
.PlayerList .Players .PlayerToggle {
|
|
min-width: 5em;
|
|
display: inline-flex;
|
|
align-items: flex-end;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.PlayerList .PlayerName {
|
|
padding: 0.5em;
|
|
}
|
|
|
|
.PlayerList .Players > * {
|
|
width: 100%;
|
|
}
|
|
|
|
.PlayerList .Players .nameInput {
|
|
flex-grow: 1;
|
|
} |