hydrogen-web/src/platform/web/ui/css/layout.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%;
}

/* unknown element in IE11 that defaults to inline */
main {
    display: block;
}

@media screen and (min-width: 600px) {
    .PreSessionScreen {
        width: 600px;
        box-sizing: border-box;
        margin: 0 auto;
        margin-top: 50px;
    }
}

.room-placeholder {
    display: flex;
    flex-direction: row;
}

.SessionView {
    /* 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%;
    width: 100%;
    display: grid;
    grid-template:
        "status status" auto
        "left   middle" 1fr /
        300px   1fr;
    min-height: 0;
    min-width: 0;
}

/* hide back button in middle section by default */
.middle .close-middle { display: none; }
/* mobile layout */
@media screen and (max-width: 800px) {
    .SessionView:not(.middle-shown) {
        grid-template:
            "status" auto
            "left" 1fr /
            1fr;
    }

    .SessionView.middle-shown {
        grid-template:
            "status" auto
            "middle" 1fr /
            1fr;
    }

    .SessionView:not(.middle-shown) .room-placeholder { display: none; }
    .SessionView.middle-shown .LeftPanel { display: none; }

    /* show back button */
    .middle .close-middle { display: block !important; }
    /* hide grid button */
    .LeftPanel .grid { display: none !important; }
}

.LeftPanel {
    grid-area: left;
    min-width: 0;
    min-height: 0;
}

.room-placeholder, .middle {
    min-width: 0;
    grid-area: middle;
    /* when room view is inside of a grid,
    grid-area middle won't be found,
    so set width manually */
    width: 100%;
    /* otherwise we don't get scrollbars and the content grows as large as it can */
    min-height: 0;
    /* make popups relative to this element so changing the left panel width doesn't affect their position */
    position: relative;
}

.RoomView {
    min-width: 0;
    min-height: 0;
    display: flex;
}

.SessionStatusView {
    grid-area: status;
}

.lightbox {
    /* cover left and middle panel, not status view
    use numeric positions because named grid areas
    are not present in mobile layout */
    grid-area: 2 / 1 / 3 / 3;
    /* this should not be necessary, but chrome seems to have a bug when there are scrollbars in other grid items,
    it seems to put the scroll areas on top of the other grid items unless they have a z-index */
    z-index: 1;
}

.TimelinePanel {
    flex: 3;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.TimelinePanel .Timeline, .TimelinePanel .TimelineLoadingView {
    flex: 1 0 0;
}

.middle-header {
    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;
}

.menu {
    position: absolute;
    z-index: 2;
}