2019-06-16 15:21:20 +02:00
|
|
|
html {
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
body {
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.SessionView {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
height: 100vh;
|
|
|
|
}
|
|
|
|
|
|
|
|
.SessionView > .main {
|
|
|
|
flex: 1;
|
|
|
|
display: flex;
|
|
|
|
min-height: 0;
|
|
|
|
min-width: 0;
|
|
|
|
width: 100vw;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* mobile layout */
|
|
|
|
@media screen and (max-width: 800px) {
|
2019-06-26 23:14:39 +02:00
|
|
|
.RoomHeader button.back { display: block; }
|
2019-06-26 22:43:59 +02:00
|
|
|
div.RoomView, div.RoomPlaceholderView { display: none; }
|
|
|
|
div.LeftPanel {flex-grow: 1;}
|
2019-06-28 00:44:49 +02:00
|
|
|
div.room-shown div.RoomView { display: flex; }
|
2019-06-26 22:43:59 +02:00
|
|
|
div.room-shown div.LeftPanel { display: none; }
|
|
|
|
div.right-shown div.TimelinePanel { display: none; }
|
2019-06-16 15:21:20 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.LeftPanel {
|
|
|
|
flex: 0 0 300px;
|
|
|
|
min-width: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.RoomPlaceholderView, .RoomView {
|
|
|
|
flex: 1 0 0;
|
|
|
|
min-width: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.RoomView {
|
|
|
|
min-width: 0;
|
|
|
|
display: flex;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.TimelinePanel {
|
|
|
|
flex: 3;
|
|
|
|
min-height: 0;
|
2019-09-28 09:45:14 +02:00
|
|
|
min-width: 0;
|
2019-06-16 15:21:20 +02:00
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
2019-07-29 20:11:15 +02:00
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.TimelinePanel ul {
|
|
|
|
flex: 1 0 0;
|
2019-06-16 15:21:20 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.RoomHeader {
|
|
|
|
display: flex;
|
|
|
|
}
|