Updated UI to display 4 users nicely

This commit is contained in:
Taichi Kato 2020-05-31 13:06:18 +08:00
parent 480e417f16
commit 77188ead7b

33
public/css/chat.css vendored
View File

@ -110,8 +110,10 @@ a {
}
#wrapper {
display: grid;
grid-gap: 10px;
display: flex;
flex-direction: column;
align-items: center;
flex-wrap: wrap;
justify-content: center;
padding: 0;
margin: 0;
@ -142,12 +144,33 @@ a {
border-radius: 0 0 10px 10px;
padding: 10px;
}
#remote-video:first-child:nth-last-child(1) {
/* -or- li:only-child { */
max-height: 80vh;
}
/* two items */
#remote-video:first-child:nth-last-child(2),
#remote-video:first-child:nth-last-child(2) ~ #remote-video {
max-height: 40vh;
}
/* three items */
#remote-video:first-child:nth-last-child(3),
#remote-video:first-child:nth-last-child(3) ~ #remote-video {
max-height: 40vh;
}
/* four items */
#remote-video:first-child:nth-last-child(4),
#remote-video:first-child:nth-last-child(4) ~ #remote-video {
max-height: 40vh;
}
#remote-video {
padding: 0;
margin: 0;
width: 100%;
height: auto;
margin: 10px;
width: auto;
border-radius: 10px;
background-image: url(../images/loader.gif);
background-size: 400px auto;