77 lines
1.5 KiB
Plaintext
77 lines
1.5 KiB
Plaintext
// note: the widths in the media queries have to be exactly the ones used by
|
|
// bootstrap, otherwise it will not behave properly.
|
|
|
|
.all-mobiles {
|
|
|
|
// first the common style used always when in mobile mode
|
|
#presentation-wrapper {
|
|
top: 6vh; // the element is not floating anymore, need a top gap
|
|
}
|
|
#presentation-wrapper, #whiteboard {
|
|
width: 100%;
|
|
}
|
|
#video {
|
|
float: left;
|
|
}
|
|
#sidebar-right {
|
|
top: 66vh; // the element is not floating anymore, need a top gap
|
|
|
|
// have to override a few attributes set by bootstrap
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
left: 0;
|
|
}
|
|
|
|
#session-view {
|
|
// common layout for when chat OR video is on
|
|
&.chat-on, &.video-on {
|
|
#presentation-wrapper, #whiteboard {
|
|
height: 60vh;
|
|
width: 100%;
|
|
}
|
|
#chat, #video {
|
|
height: 33vh;
|
|
}
|
|
#sidebar-right {
|
|
position: absolute;
|
|
}
|
|
}
|
|
|
|
// when chat only is on, make it fullsize
|
|
&.chat-on #chat {
|
|
width: 100%;
|
|
}
|
|
|
|
// when video only is on, make it fullsize
|
|
&.video-on #video {
|
|
width: 100%;
|
|
}
|
|
|
|
// when chat AND video are on, make them smaller
|
|
&.chat-on.video-on {
|
|
#video {
|
|
width: 30%;
|
|
}
|
|
#chat {
|
|
width: 70%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Portrait tablet to landscape and desktop */
|
|
@media (min-width: 768px) and (max-width: 992px) {
|
|
.all-mobiles;
|
|
}
|
|
|
|
/* Landscape phone to portrait tablet */
|
|
@media (max-width: 767px) {
|
|
.all-mobiles;
|
|
}
|
|
|
|
/* Landscape phones and down */
|
|
@media (max-width: 480px) {
|
|
.all-mobiles;
|
|
}
|