Responsive styles for Chrome/Firefox/Phones. Update to 1.0.0-beta.3
This commit is contained in:
parent
442499bf01
commit
aefed80475
@ -45,8 +45,8 @@ nav i.fa:hover {
|
||||
}
|
||||
|
||||
.vertical-center {
|
||||
position: absolute;
|
||||
top: 51%;
|
||||
position: relative;
|
||||
top: 30%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
@ -137,8 +137,8 @@ a:hover .demo-logo {
|
||||
|
||||
#img-div {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 26%;
|
||||
position: relative;
|
||||
top: 20%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
@ -229,14 +229,30 @@ video {
|
||||
|
||||
/* xs ans md screen resolutions*/
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
@media screen and (max-width: 991px) and (orientation: portrait) {
|
||||
.vertical-center {
|
||||
width: 85%;
|
||||
padding-top: 10px;
|
||||
top: 57%;
|
||||
top: 27%;
|
||||
}
|
||||
.container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
.navbar-header i.fa {
|
||||
font-size: 30px;
|
||||
}
|
||||
.navbar-header a.nav-icon {
|
||||
padding: 7px 3px 7px 3px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-height: 767px) and (orientation: landscape) {
|
||||
#img-div {
|
||||
top: 32%;
|
||||
top: 10%;
|
||||
}
|
||||
.vertical-center {
|
||||
top: 27%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -43,12 +43,12 @@ nav i.fa:hover {
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
.vertical-center {
|
||||
position: absolute;
|
||||
top: 56%;
|
||||
/*vertical-center {
|
||||
position: relative;
|
||||
top: 30%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}*/
|
||||
|
||||
.horizontal-center {
|
||||
margin: 0 auto;
|
||||
@ -124,6 +124,12 @@ a:hover .demo-logo {
|
||||
filter: brightness(0.7);
|
||||
}
|
||||
|
||||
#join-dialog {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 70%;
|
||||
}
|
||||
|
||||
#join-dialog h1 {
|
||||
color: #4d4d4d;
|
||||
font-weight: bold;
|
||||
@ -132,10 +138,12 @@ a:hover .demo-logo {
|
||||
|
||||
#img-div {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 19%;
|
||||
margin-top: 3em;
|
||||
margin-bottom: 3em;
|
||||
/*position: relative;
|
||||
top: 20%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);*/
|
||||
}
|
||||
|
||||
#img-div img {
|
||||
@ -224,10 +232,35 @@ video {
|
||||
|
||||
/* xs ans md screen resolutions*/
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
.vertical-center {
|
||||
width: 85%;
|
||||
padding-top: 10px;
|
||||
top: 57%;
|
||||
@media screen and (max-width: 991px) and (orientation: portrait) {
|
||||
#join-dialog {
|
||||
max-width: inherit;
|
||||
}
|
||||
#img-div img {
|
||||
height: 10%;
|
||||
}
|
||||
#img-div {
|
||||
margin-top: 2em;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
.container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
.navbar-header i.fa {
|
||||
font-size: 30px;
|
||||
}
|
||||
.navbar-header a.nav-icon {
|
||||
padding: 7px 3px 7px 3px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-height: 767px) and (orientation: landscape) {
|
||||
#img-div {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
#join-dialog {
|
||||
max-width: inherit;
|
||||
}
|
||||
}
|
||||
@ -4,7 +4,7 @@
|
||||
|
||||
<groupId>io.openvidu</groupId>
|
||||
<artifactId>openvidu-js-java</artifactId>
|
||||
<version>1.0.0-beta.1</version>
|
||||
<version>1.0.0-beta.3</version>
|
||||
<packaging>jar</packaging>
|
||||
|
||||
<name>openvidu-js-java</name>
|
||||
@ -95,7 +95,7 @@
|
||||
<dependency>
|
||||
<groupId>io.openvidu</groupId>
|
||||
<artifactId>openvidu-java-client</artifactId>
|
||||
<version>1.0.0-beta.1</version>
|
||||
<version>1.0.0-beta.3</version>
|
||||
</dependency>
|
||||
|
||||
</dependencies>
|
||||
|
||||
@ -44,10 +44,23 @@ nav i.fa:hover {
|
||||
}
|
||||
|
||||
.vertical-center {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: -webkit-fit-content;
|
||||
width: fit-content;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.vertical-center#not-logged form {
|
||||
width: -moz-fit-content;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.vertical-center#not-logged table {
|
||||
width: -moz-fit-content;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.vertical-center table {
|
||||
margin-top: 3em !important;
|
||||
}
|
||||
|
||||
.horizontal-center {
|
||||
@ -158,6 +171,14 @@ a:hover .demo-logo {
|
||||
filter: brightness(0.7);
|
||||
}
|
||||
|
||||
#join {
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
#not-logged {
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
#join-dialog h1 {
|
||||
color: #4d4d4d;
|
||||
font-weight: bold;
|
||||
@ -198,6 +219,10 @@ a:hover .demo-logo {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#session-header form {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#session-title {
|
||||
display: inline-block;
|
||||
}
|
||||
@ -306,6 +331,10 @@ table i {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#login-info form {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#login-info div {
|
||||
display: inline;
|
||||
margin-right: 1em;
|
||||
@ -319,6 +348,13 @@ table i {
|
||||
/* xs ans md screen resolutions*/
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
#join {
|
||||
padding-top: inherit;
|
||||
}
|
||||
|
||||
#not-logged {
|
||||
padding-top: inherit;
|
||||
}
|
||||
.container .navbar-header {
|
||||
margin-right: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
@ -330,7 +366,6 @@ table i {
|
||||
font-size: 32px;
|
||||
}
|
||||
.vertical-center {
|
||||
width: 85%;
|
||||
padding-top: 10px;
|
||||
}
|
||||
#img-div {
|
||||
|
||||
@ -20,6 +20,6 @@
|
||||
"body-parser": "^1.17.2",
|
||||
"express": "^4.15.3",
|
||||
"express-session": "^1.15.3",
|
||||
"openvidu-node-client": "1.0.1-beta.1"
|
||||
"openvidu-node-client": "1.0.1-beta.3"
|
||||
}
|
||||
}
|
||||
|
||||
@ -44,10 +44,23 @@ nav i.fa:hover {
|
||||
}
|
||||
|
||||
.vertical-center {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: -webkit-fit-content;
|
||||
width: fit-content;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.vertical-center#not-logged form {
|
||||
width: -moz-fit-content;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.vertical-center#not-logged table {
|
||||
width: -moz-fit-content;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.vertical-center table {
|
||||
margin-top: 3em !important;
|
||||
}
|
||||
|
||||
.horizontal-center {
|
||||
@ -158,6 +171,14 @@ a:hover .demo-logo {
|
||||
filter: brightness(0.7);
|
||||
}
|
||||
|
||||
#join {
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
#not-logged {
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
#join-dialog h1 {
|
||||
color: #4d4d4d;
|
||||
font-weight: bold;
|
||||
@ -198,6 +219,10 @@ a:hover .demo-logo {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#session-header form {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#session-title {
|
||||
display: inline-block;
|
||||
}
|
||||
@ -306,6 +331,10 @@ table i {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#login-info form {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#login-info div {
|
||||
display: inline;
|
||||
margin-right: 1em;
|
||||
@ -319,6 +348,13 @@ table i {
|
||||
/* xs ans md screen resolutions*/
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
#join {
|
||||
padding-top: inherit;
|
||||
}
|
||||
|
||||
#not-logged {
|
||||
padding-top: inherit;
|
||||
}
|
||||
.container .navbar-header {
|
||||
margin-right: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
@ -330,7 +366,6 @@ table i {
|
||||
font-size: 32px;
|
||||
}
|
||||
.vertical-center {
|
||||
width: 85%;
|
||||
padding-top: 10px;
|
||||
}
|
||||
#img-div {
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
|
||||
<groupId>io.openvidu</groupId>
|
||||
<artifactId>openvidu-mvc-java</artifactId>
|
||||
<version>1.0.0-beta.1</version>
|
||||
<version>1.0.0-beta.3</version>
|
||||
<packaging>jar</packaging>
|
||||
|
||||
<parent>
|
||||
@ -41,7 +41,7 @@
|
||||
<dependency>
|
||||
<groupId>io.openvidu</groupId>
|
||||
<artifactId>openvidu-java-client</artifactId>
|
||||
<version>1.0.0-beta.1</version>
|
||||
<version>1.0.0-beta.3</version>
|
||||
</dependency>
|
||||
</dependencies>
|
||||
|
||||
|
||||
@ -44,10 +44,23 @@ nav i.fa:hover {
|
||||
}
|
||||
|
||||
.vertical-center {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: -webkit-fit-content;
|
||||
width: fit-content;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.vertical-center#not-logged form {
|
||||
width: -moz-fit-content;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.vertical-center#not-logged table {
|
||||
width: -moz-fit-content;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.vertical-center table {
|
||||
margin-top: 3em !important;
|
||||
}
|
||||
|
||||
.horizontal-center {
|
||||
@ -158,6 +171,14 @@ a:hover .demo-logo {
|
||||
filter: brightness(0.7);
|
||||
}
|
||||
|
||||
#join {
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
#not-logged {
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
#join-dialog h1 {
|
||||
color: #4d4d4d;
|
||||
font-weight: bold;
|
||||
@ -327,6 +348,13 @@ table i {
|
||||
/* xs ans md screen resolutions*/
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
#join {
|
||||
padding-top: inherit;
|
||||
}
|
||||
|
||||
#not-logged {
|
||||
padding-top: inherit;
|
||||
}
|
||||
.container .navbar-header {
|
||||
margin-right: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
@ -338,7 +366,6 @@ table i {
|
||||
font-size: 32px;
|
||||
}
|
||||
.vertical-center {
|
||||
width: 85%;
|
||||
padding-top: 10px;
|
||||
}
|
||||
#img-div {
|
||||
|
||||
@ -21,6 +21,6 @@
|
||||
"ejs": "^2.5.6",
|
||||
"express": "^4.15.3",
|
||||
"express-session": "^1.15.3",
|
||||
"openvidu-node-client": "1.0.1-beta.1"
|
||||
"openvidu-node-client": "1.0.1-beta.3"
|
||||
}
|
||||
}
|
||||
|
||||
@ -44,10 +44,23 @@ nav i.fa:hover {
|
||||
}
|
||||
|
||||
.vertical-center {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: -webkit-fit-content;
|
||||
width: fit-content;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.vertical-center#not-logged form {
|
||||
width: -moz-fit-content;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.vertical-center#not-logged table {
|
||||
width: -moz-fit-content;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.vertical-center table {
|
||||
margin-top: 3em !important;
|
||||
}
|
||||
|
||||
.horizontal-center {
|
||||
@ -158,6 +171,14 @@ a:hover .demo-logo {
|
||||
filter: brightness(0.7);
|
||||
}
|
||||
|
||||
#join {
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
#not-logged {
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
#join-dialog h1 {
|
||||
color: #4d4d4d;
|
||||
font-weight: bold;
|
||||
@ -327,6 +348,13 @@ table i {
|
||||
/* xs ans md screen resolutions*/
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
#join {
|
||||
padding-top: inherit;
|
||||
}
|
||||
|
||||
#not-logged {
|
||||
padding-top: inherit;
|
||||
}
|
||||
.container .navbar-header {
|
||||
margin-right: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
@ -338,7 +366,6 @@ table i {
|
||||
font-size: 32px;
|
||||
}
|
||||
.vertical-center {
|
||||
width: 85%;
|
||||
padding-top: 10px;
|
||||
}
|
||||
#img-div {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user