mirror of
https://github.com/ianramzy/decentralized-video-chat.git
synced 2024-11-14 14:19:20 +08:00
Updated UI to display 4 users nicely
This commit is contained in:
parent
480e417f16
commit
77188ead7b
33
public/css/chat.css
vendored
33
public/css/chat.css
vendored
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user