Update cowebsite mobile style
This commit is contained in:
parent
30c1825abd
commit
20e0a2553e
48
front/dist/resources/style/cowebsite.scss
vendored
48
front/dist/resources/style/cowebsite.scss
vendored
@ -87,51 +87,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-aspect-ratio: 1/1) {
|
||||
|
||||
#main-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
|
||||
#cowebsite {
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
|
||||
&.loading {
|
||||
transform: translateY(-90%);
|
||||
}
|
||||
&.hidden {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
main {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
aside {
|
||||
height: 30px;
|
||||
cursor: ns-resize;
|
||||
flex-direction: column;
|
||||
|
||||
img {
|
||||
cursor: ns-resize;
|
||||
}
|
||||
}
|
||||
|
||||
.top-right-btn {
|
||||
&#cowebsite-close {
|
||||
right: 0px;
|
||||
}
|
||||
&#cowebsite-fullscreen {
|
||||
right: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
80
front/dist/resources/style/mobile-style.scss
vendored
80
front/dist/resources/style/mobile-style.scss
vendored
@ -1,6 +1,6 @@
|
||||
@media only screen and (max-width: 700px) {
|
||||
video#myCamVideo {
|
||||
width: 200px;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
@ -21,19 +21,28 @@
|
||||
}
|
||||
}
|
||||
|
||||
.btn-cam-action div {
|
||||
bottom: 30px;
|
||||
|
||||
&.btn-micro {
|
||||
right: 15px;
|
||||
.btn-cam-action {
|
||||
&:hover{
|
||||
transform: translateY(20px);
|
||||
}
|
||||
div {
|
||||
&:hover {
|
||||
background-color: #666;
|
||||
}
|
||||
|
||||
&.btn-monitor {
|
||||
right: 171px;
|
||||
}
|
||||
bottom: 30px;
|
||||
|
||||
&.btn-video {
|
||||
right: 95px;
|
||||
&.btn-micro {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&.btn-monitor {
|
||||
right: 130px;
|
||||
}
|
||||
|
||||
&.btn-video {
|
||||
right: 65px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -48,3 +57,52 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-aspect-ratio: 1/1) {
|
||||
|
||||
#main-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
|
||||
#cowebsite {
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
|
||||
&.loading {
|
||||
transform: translateY(-90%);
|
||||
}
|
||||
&.hidden {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
main {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
aside {
|
||||
height: 30px;
|
||||
cursor: ns-resize;
|
||||
flex-direction: column;
|
||||
|
||||
img {
|
||||
cursor: ns-resize;
|
||||
}
|
||||
}
|
||||
|
||||
.top-right-btn {
|
||||
&#cowebsite-close {
|
||||
right: 0;
|
||||
}
|
||||
&#cowebsite-fullscreen {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user