fullscreen.css

/*
// This file is originally a part of https://github.com/qwiglydee/otree-advanced-demos
// SPDX-FileCopyrightText: © 2024 Maxim Vasilyev <qwiglydee@gmail.com>
// SPDX-License-Identifier: MIT
*/

/**
 * Fullscreen flexible page layout.
 *
 * Stretches page to full screen height. Width is defined according to bootstrap container adaptive style.
 *
 * The stylesheet defineds elements <header> <main> <footer> to be aligned at top/middle/bottom of the page.
 * Content of the elements is centered or aligned to top/bottom.
 */

.otree-body>h2,
.otree-body>br,
form#liveform {
    display: none;
}

.debug-info {
    margin-top: 1rem;
}

/** width copy-pasted from boostrap container */
@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

._otree-content {
    height: 100vh;
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
    padding: 0;
}

.otree-timer {
    display: none;
}

/** page sections **/

header,
main,
footer
{
    display: flex;
    flex-flow: column nowrap;
    padding: 0.75rem;
}

header {
    justify-content: start;
    align-items: center;
}

main {
    justify-content: center;
    align-items: center;
}

footer {
    justify-content: end;
    align-items: center;
}

header,
footer {
    flex: 1 1 25%;
}

main {
    flex: 1 1 50%;
}

/* clean up header and paragraph margins */
footer>*:last-child,
header>*:last-child,
main>*:last-child {
    margin-bottom: 0;
}


/* prevent inputs to be too wide */
.input-group {
    width: auto;
}