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;
}

/* resize and reposition session view to account for mobile Safari which shifts
the layout viewport up without resizing it when the keyboard shows */
.hydrogen.ios .SessionView {
    height: var(--ios-viewport-height, 100%);
    top: var(--ios-viewport-top, 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;
}

.middle {
    display: flex;
    flex-direction: column;
}

.SessionStatusView {
    grid-area: status;
}

.lightbox {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    /* Safari requires an explicit height on the container to prevent picture content from collapsing */
    box-sizing: border-box;
    height: 100%;
}

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

.RoomView_body .Timeline, .RoomView_body .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;
}

.Settings {
    display: flex;
    flex-direction: column;
}

.SettingsBody {
    min-height: 0;
    overflow-y: auto;
}