MigrateRepos/decentralized-video-chat
1
0
Fork 0
mirror of https://github.com/ianramzy/decentralized-video-chat.git synced 2025-02-23 00:15:04 +08:00
Code Issues Releases Wiki Activity

Updated UI to display 4 users nicely

Browse Source
This commit is contained in:
Taichi Kato 2020-05-31 13:06:18 +08:00
parent 480e417f16
commit 77188ead7b
1 changed files with 28 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
public/css/chat.css vendored
View File

@ -110,8 +110,10 @@ a {
} }
#wrapper { #wrapper {
display: grid; display: flex;
grid-gap: 10px; flex-direction: column;
align-items: center;
flex-wrap: wrap;
justify-content: center; justify-content: center;
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -142,12 +144,33 @@ a {
border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px;
padding: 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 { #remote-video {
padding: 0; padding: 0;
margin: 0; margin: 10px;
width: 100%; width: auto;
height: auto;
border-radius: 10px; border-radius: 10px;
background-image: url(../images/loader.gif); background-image: url(../images/loader.gif);
background-size: 400px auto; background-size: 400px auto;