style.less

@pagefont: sans-serif;
@pagewidth: 100vw;
@pageheight: 100vh;

@edit-pane-bg: #aaa;
@edit-pane-hl: #ccc;
@edit-pane-shadow: #777;
@edit-pane-submenu-bg: #999;
@edit-pane-btn-hl: #eee;
@edit-pane-dark-shadow: #444;

@radius-small: 0.2em;

@block-small-hl: ~"1px 1px 0px #eee inset";
@block-small-hl-outset: ~"1px 1px 0px #eee";
@block-small-shadow: ~"1px 1px 0px #ccc";
@block-small-shading: ~"1px 1px 0px #eee inset, 1px 1px 0px #ccc";

@small-width: ~"(max-width: 1000px)";
@med-width: ~"(max-width: 1600px)";

@content-pad: 1em;

.rotate-z(@z)
{
    -moz-transform: rotate(@z);
    -webkit-transform: rotate(@z);
    transform: rotate(@z);
}

.shadow-mixin()
{
    box-shadow+: @block-small-shadow;
}

.highlight-mixin()
{
    box-shadow+: @block-small-hl;
}

.outset-hl-mixin()
{
    box-shadow+: @block-small-hl-outset;
}

.outset-hls-mixin()
{
    box-shadow+: 1px 1px 0px #ccc inset, 1px 1px 0px #ccc
}

.shading-mixin()
{
    .shadow-mixin();
    .highlight-mixin();
}

body
{
    * { font-family: @pagefont; }

    max-width: @pagewidth;
    max-height: @pageheight;
    height: @pageheight;
    margin: 0;
    display: grid;
    overflow: hidden;
    grid-template-columns: min-content 1fr 30em;
    grid-template-rows: 50vh 25vh 25vh;
    grid-template-areas: "left center right" "left center right" "left center output";

    @media @med-width
    {
        grid-template-columns: min-content 1fr 15em;
        grid-template-rows: 1fr 15em;
        grid-template-areas: "left center right" "left output output";
    }

    @media @small-width
    {
        grid-template-columns: min-content 1fr;
        grid-template-rows: 0.3fr 1fr 15em;
        grid-template-areas: "left center" "right center" "right output";
    }
}

#left-panel
{   
    grid-area: left;
    width: auto;
    min-width: 15em; /* This panel is resizable horizontally */
    max-width: 50vw;

    div.panel-content
    {
        resize: horizontal;
        max-width: calc(50vw - 2 * @content-pad);
        min-width: calc(15em - 2 * @content-pad);
    }
}

#right-panel
{
    grid-area: right;
}

#center-panel
{
    grid-area: center;
    width: 100%;
    max-height: 100%;
    height: 100%;
    overflow: hidden;
}

#output-panel
{
    display: flex; /* Keeps entire text content inside, including padding */
    flex-direction: column;
    grid-area: output;
    width: 100%;
    height: auto;
}

#cvs_viewport
{
    width: 100%;
    height: auto;
    max-height: 100%;
}

#console
{
    display: block;
    font-family: monospace;
    color: white;
    background-color: black;
    width: 100%;
    height: 100%;
    resize: none;
    border: none;
    padding: 1em;
}

.dynamic-content
{
    transition: height 0.2s;
}

.panel
{
    height: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: @edit-pane-bg;
    box-shadow: @edit-pane-shadow 0 0 0.5em inset;
    overflow: hidden;

    @media @small-width
    {
        min-height: 50vh;
    }

    .group-bordered
    {
        border-radius: @radius-small;
        padding: 0.5em;
        border: 1px solid @edit-pane-shadow;
        .outset-hls-mixin();
    }

    p
    {
        font-size: 11pt;
        line-height: 1.2em;
    }

    h1
    {
        font-size: x-large;
        font-family: @pagefont;
        background-image: linear-gradient(@edit-pane-hl, @edit-pane-bg, @edit-pane-shadow);
        padding: 0.2em;
        text-align: center;
        margin: 0;
        text-shadow: 1px 1px 0 @edit-pane-bg;
        
        @media @small-width
        {
            font-size: large;
        }
    }

    .smallhn
    {
        margin: 0;
        padding: 0.2em;
    }

    h2
    {
        .smallhn();
        font-size: large;
        text-shadow: 1px 1px 0 @edit-pane-hl;
    }

    h3
    {
        .smallhn();
        font-size: small;
    }

    ul
    {
        background-color: @edit-pane-bg;
        display: block;
        margin-left: 0;
        padding-left: 0;
        border: 1px solid @edit-pane-shadow;
        border-radius: @radius-small;
        overflow: hidden;
        list-style: none;
        .outset-hls-mixin();

        ul
        {
            margin-left: 1em;
            background-color: @edit-pane-submenu-bg;
        }

        li
        {
            border-top: 1px solid @edit-pane-shadow;

            &:first-of-type
            {
                border: none;

                button
                {
                    border-top-left-radius: @radius-small;
                    border-top-right-radius: @radius-small;
                }
            }

            &:last-of-type
            {
                button
                {
                    border-bottom-left-radius: @radius-small;
                    border-bottom-right-radius: @radius-small;
                }
            }
        }

        button
        {
            padding-left: 2.3em;
            border: none;
            background-color: @edit-pane-hl;
            text-align: left;
            border-radius: 0;
            margin: 0;
            transition: padding-left 0.1s;
            .highlight-mixin();

            &.dropdown
            {
                padding-left: 0.3em;

                &:hover
                { 
                    padding-left: 0.5em;
                }

                &:focus
                {
                    padding-left: 1em;
                }
            }

            &:hover
            {
                padding-left: 2.8em;
            }
        }
    }

    button
    {
        width: 100%;
        padding: 0.3em;
        font-weight: bold;
        background-color: @edit-pane-hl;
        border: 1px solid @edit-pane-shadow;
        box-shadow: @block-small-shading; /* fake border 3d effect */
        border-radius: @radius-small;
        margin-top: 0.2em;
        margin-bottom: 0.2em;

        &:focus
        {
            /* Makes tab-navigation possible */
            text-decoration: underline;
            outline: 0;
        }

        &:hover
        {
            box-shadow: 0 0 0.5em white inset;
        }

        &:active
        {
            box-shadow: @edit-pane-dark-shadow 0 0.2em 0.5em inset;
            background-color: @edit-pane-submenu-bg;
        }

        &.dropdown
        {
            &::before
            {
                position: relative;
                background: url(arrow.png);
                background-size: 1em 1em;
                background-position: 0.5em;
                background-repeat: no-repeat;
                width: 2em;
                height: 1em;
                display: inline-block;
                transition: 0.1s;

                content: "";
            }

            &:hover::before
            {
                .rotate-z(45deg);
            }

            &:active
            {
                box-shadow: none;
                background-color: @edit-pane-bg;
            }

            &:focus
            {
                box-shadow: @edit-pane-dark-shadow 0 0.2em 0.5em, 0 0 0.5em white inset;

                &::before
                {
                    .rotate-z(90deg);
                }
            }
        }
    }

    &-content
    {
        overflow: auto;
        height: 100%;
        padding: 1em;

        & > *:nth-child(n + 2)
        {
            margin-top: @content-pad;
        }
    }

    div.dropdown-content
    {
        display: none;
        height: 0;
    }

    .content-group
    {
        .group-bordered();

        ul
        {
            margin-top: 0;
            margin-bottom: 1em;
    
            &:last-child
            {
                margin-bottom: 0;
            }
        }

        &::before
        {
            content: attr(title);
            position: relative;
            display: block;
            color: black;
            text-shadow: @block-small-shadow;
            background-color: @edit-pane-bg;
            width: min-content;
            white-space: nowrap;
            padding-left: 0.3em;
            padding-right: 0.3em;
            top: -0.8em;
            height: 0.5em;
        }
    }

    .flex-menu
    {
        .group-bordered();

        display: flex;
        flex-wrap: wrap;
        justify-content: left;
        height: auto;

        & > button
        {
            max-width: 5em;
            margin: 0.2em;
        }
    }

    progress
    {
        width: 100%;
    }
}