47a43869e6
this brings back index addressing rather than x y in the grid vm, as we need to have a css class for every position for IE 11, as we can't use css variables and autoprefixer can translate grid-areas
123 lines
2.7 KiB
CSS
123 lines
2.7 KiB
CSS
/*
|
|
Copyright 2020 Bruno Windels <bruno@windels.cloud>
|
|
Copyright 2020 The Matrix.org Foundation C.I.C.
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
you may not use this file except in compliance with the License.
|
|
You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
See the License for the specific language governing permissions and
|
|
limitations under the License.
|
|
*/
|
|
|
|
html {
|
|
height: 100%;
|
|
}
|
|
|
|
@media screen and (min-width: 600px) {
|
|
.PreSessionScreen {
|
|
width: 600px;
|
|
box-sizing: border-box;
|
|
margin: 0 auto;
|
|
margin-top: 50px;
|
|
}
|
|
}
|
|
|
|
.SessionView {
|
|
display: flex;
|
|
flex-direction: column;
|
|
/* this takes into account whether or not the url bar is hidden on mobile
|
|
(have tested Firefox Android and Safari on iOS),
|
|
see https://developers.google.com/web/updates/2016/12/url-bar-resizing */
|
|
position: fixed;
|
|
height: 100%;
|
|
}
|
|
|
|
.SessionView > .main {
|
|
flex: 1;
|
|
display: flex;
|
|
min-height: 0;
|
|
min-width: 0;
|
|
width: 100vw;
|
|
}
|
|
|
|
/* mobile layout */
|
|
@media screen and (max-width: 800px) {
|
|
/* show back button */
|
|
.RoomHeader button.back { display: block; }
|
|
/* hide grid button */
|
|
.LeftPanel button.grid { display: none; }
|
|
div.RoomView, div.RoomPlaceholderView, div.RoomGridView { display: none; }
|
|
div.LeftPanel {flex-grow: 1;}
|
|
div.room-shown div.RoomView { display: flex; }
|
|
div.room-shown div.LeftPanel { display: none; }
|
|
div.right-shown div.TimelinePanel { display: none; }
|
|
}
|
|
|
|
.LeftPanel {
|
|
flex: 0 0 300px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.RoomPlaceholderView, .RoomView, .RoomGridView {
|
|
flex: 1 0 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
.RoomView {
|
|
min-width: 0;
|
|
display: flex;
|
|
}
|
|
|
|
|
|
.TimelinePanel {
|
|
flex: 3;
|
|
min-height: 0;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
.TimelinePanel .Timeline, .TimelinePanel .TimelineLoadingView {
|
|
flex: 1 0 0;
|
|
}
|
|
|
|
.RoomHeader {
|
|
display: flex;
|
|
}
|
|
|
|
.RoomGridView {
|
|
display: grid;
|
|
}
|
|
|
|
.RoomGridView.layout3x2 {
|
|
grid-template:
|
|
"t0 t1 t2" 1fr
|
|
"t3 t4 t5" 1fr /
|
|
1fr 1fr 1fr;
|
|
}
|
|
|
|
.RoomGridView > .tile0 {grid-area: t0;}
|
|
.RoomGridView > .tile1 {grid-area: t1;}
|
|
.RoomGridView > .tile2 {grid-area: t2;}
|
|
.RoomGridView > .tile3 {grid-area: t3;}
|
|
.RoomGridView > .tile4 {grid-area: t4;}
|
|
.RoomGridView > .tile5 {grid-area: t5;}
|
|
|
|
.RoomGridView > div {
|
|
display: flex;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
}
|
|
|
|
.RoomGridView > div.focus-ring {
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
}
|