MigrateRepos/decentralized-video-chat
1
0
Fork 0
mirror of https://github.com/ianramzy/decentralized-video-chat.git synced 2024-11-17 07:39:21 +08:00
Code Issues Releases Wiki Activity

Updated CSS to adopt better to mobile screens

Browse Source
This commit is contained in:
Taichi Kato 2020-06-01 12:30:23 +08:00
parent 7b989b6c1d
commit 37b9035433
1 changed files with 22 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
public/css/chat.css vendored
View File

@ -111,7 +111,9 @@ a {
#wrapper { #wrapper {
display: flex; display: flex;
flex-direction: column; /* flex: 1 1 20em; */
/* flex-basis: 30%; */
flex-direction: row;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
@ -122,8 +124,8 @@ a {
left: 50%; left: 50%;
-ms-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 65%; width: 100%;
max-height: 100%; max-height: 90vh;
max-width: 100%; max-width: 100%;
} }
@ -146,7 +148,7 @@ a {
} }
#remote-video:first-child:nth-last-child(1) { #remote-video:first-child:nth-last-child(1) {
/* -or- li:only-child { */ /* -or- li:only-child { */
max-height: 80vh; width: 80vw;
} }
/* two items */ /* two items */
@ -415,7 +417,22 @@ button:hover {
margin: 0; margin: 0;
line-height: 2rem; line-height: 2rem;
} }
#wrapper {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
justify-content: center;
padding: 0;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, calc(-50% - 3rem));
max-height: 90%;
max-width: 100%;
}
#remote-video { #remote-video {
/* width: 75vw; /* width: 75vw;
height: calc((16/9) * 75vw); */ height: calc((16/9) * 75vw); */