app.less

@import url('../shared/theme.less');
@import url('../shared/flex.less');

html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: @median-bg-white;
}



.flex-horiz > * {
    min-height: auto !important;
    max-height: none !important;
}

.flex-vert > * {
    min-width: auto !important;
    max-width: none !important;
}


.animate .flex-horiz > *, .animate .flex-vert > * {
    transition: all 280ms ease-in-out;
}

body {
    font-family: @primary-font-family;
}

.section {
    background: @primary-bg-color-white; 
    padding: 10px; 
    font-size: 18px;
}

.section.top {
    border-bottom: 1px solid @primary-border-color-white;
    padding: 0;
}

.section.top h1 {
    margin: 0;
    padding: 10px;
    font-family: @primary-font-family;
    font-weight: 400;
    font-size: 18px;
    display: inline-block;
}

.section.bottom {
    padding: 10px;
    border-top: 1px solid @primary-border-color-white;
    font-size: 10px;
    text-align: right;
}

.code-editor-containers {
    background: @editor-bg-white;
}

.flex-dynamic.flex-horiz .code-editor-containers {
    min-width: 50%;
    max-width: 50%;
}

.flex-dynamic.flex-vert .code-editor-containers {
    min-height: 50%;
    max-height: 50%;
}

.flex-dynamic.flex-horiz .code-editor-containers.force-close {
    min-width: 0 !important;
    max-width: 0 !important;
}

.flex-dynamic.flex-vert .code-editor-containers.force-close {
    min-height: 0 !important;
    max-height: 0 !important;
}

.flex-dynamic.flex-horiz .code-editor-containers resize-handle[dir='vertical'],
.flex-dynamic.flex-horiz .output-frame-container resize-handle[dir='vertical'] {
    display: none;
}

.flex-dynamic.flex-vert .code-editor-containers resize-handle[dir='horizontal'],
.flex-dynamic.flex-vert .output-frame-container resize-handle[dir='horizontal'] {
    display: none;
}

@media (orientation: landscape) and (max-height: 320px) {
    .output-frame-container {
        display: none;
    }

    .code-editor-containers {
        min-width: 100% !important;
        max-width: 100% !important;
    }
}

@media (orientation: portrait) and (max-height: 400px) {
    .output-frame-container {
        display: none;
    }

    .code-editor-containers {
        min-height: 100% !important;
        max-height: 100% !important;
    }
}


@media (prefers-color-scheme: dark) {
    body {
        background: @median-bg-dark;
    }

    .section {
        color: @primary-text-color-dark;
        background: @primary-bg-color-dark; 
    }

    .section.top {
        border-color: @primary-border-color-dark;
    }
    
    .section.bottom {
        border-color: @primary-bg-color-dark;
    }

    .code-editor-containers {
        background: @editor-bg-dark;
    }
}