@import "../Declarations";
@import "../normalize";
@import "../FontAwesome/font-awesome";

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

body {
    font-size: 16px;
    font-family: @FontFamilyBody;
    cursor: none;
}

h1, h2, h3, h4 {
    margin: 0;
    padding: 0;
}

div#page {
    margin: 0px;
    padding: 0px;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

header, #header {
    color: @white;
    background-color: @HeaderBackgroundColour;

    #heading {
        margin-left: 4px;
        display: inline-block;
        font-size: 1.1em;
        font-weight: bold;
        line-height: 34px;
        text-transform: uppercase;
    }

    #credits {
        font-family: @FontFamilyHeading;
        font-weight: @FontWeightHeading;
        font-stretch: @FontStretchHeading;
        font-size: .8em;
        position: absolute;
        top: 0;
        right: 4px;
        height: 34px;

        i {
            margin-bottom: -10px;
            display: inline-block;
            height: 34px;
            width: 34px;
            background-image: url(data:image/png;base64,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) /*Images/Heading.png*/;
        }
    }
}

#statusConnecting, #statusError {
    display: none;
}

#mainSection {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    padding: 6px 6px 0 6px;
    gap: 6px;

    .list {
        flex-grow: 1;
        display: flex;
        flex-direction: column;

        h3 {
            font-family: @FontFamilyHeading;
            font-weight: @FontWeightHeading;
            font-stretch: @FontStretchHeading;
            text-transform: uppercase;
            margin-left: 6px;
            margin-bottom: 4px;
            font-size: 1.4em;
            color: @white;
        }

        div.content {
            overflow: hidden;
            flex-grow: 1;

            div.noContent {
                font-family: @FontFamilyHeading;
                font-weight: @FontWeightHeading;
                font-stretch: @FontStretchHeading;
                font-size: 1.1em;
                text-align: center;
                text-transform: lowercase;
                margin-top: 40px;
            }

            ul {
                padding: 0;
                margin: 0;
                list-style: none;

                li {
                    position: relative;
                    margin: 4px 2px;
                    padding: 6px 8px;
                    clear: both;
                    overflow: hidden;
                    white-space: nowrap;
                    -ms-text-overflow: ellipsis;
                    -o-text-overflow: ellipsis;
                    text-overflow: ellipsis;
                    background-color: @white;
                    color: @black;

                    .small {
                        display: inline-block;
                        float: right;
                        font-size: 0.8em;
                        margin-top: 0.1em;
                    }

                    &:after {
                        clear: both;
                        content: ".";
                        display: block;
                        height: 0;
                        visibility: hidden;
                        font-size: 0;
                    }
                }
            }
        }
    }
}

footer, #footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    display: block;
}

body {

    &.status-connecting {
        #statusConnecting {
            display: inline-block;
            color: @StatusAlert;
            margin-left: 14px;
            line-height: 34px;

            span {
                padding-left: 4px;
                font-size: .8em;
            }
        }

        #mainSection {
            display: none;
        }
    }

    &.status-error {
        #statusError {
            display: inline-block;
            color: @StatusAlert;
            margin-left: 14px;
            line-height: 34px;

            span {
                padding-left: 4px;
                font-size: .8em;
            }
        }

        #mainSection {
            opacity: 0.3;
        }
    }

    &.hide-inProcess {
        #inProcess {
            display: none !important;
        }
    }

    &.hide-readyForReturn {
        #readyForReturn {
            display: none !important;
        }
    }

    &.hide-waitingForUserAction {
        #waitingForUserAction {
            display: none !important;
        }
    }
}

/* Themes */

.theme-builder(@main-colour, @alert-colour: difference(@main-colour, @white), @alert-text-colour: contrast(@alert-colour)) {
    background: linear-gradient(to bottom, darken(@main-colour, 10%), @main-colour) left top repeat-x @main-colour;

    #mainSection {
        .list {
            div.content {
                background: fade(@white, 20%);
            }

            ul li {
                border: 1px solid softlight(@main-colour, #aaa);

                &.alert {
                    background-color: @alert-colour;
                    border: 1px solid hardlight(@alert-colour, #aaa);
                    color: @alert-text-colour;
                }
            }
        }
    }

    footer, #footer {
        background: linear-gradient(to bottom, fadeout(@main-colour, 100%), @main-colour 90%) left top repeat-x;
    }
}

body.theme-default {
    .theme-builder(@ButtonColour, @ThemeRed);
}

body.theme-default-soft {
    .theme-builder(@ButtonColour, hardlight(@ThemeYellow, #bbb));
}

body.theme-green {
    .theme-builder(@ThemeGreen, @ThemeRed);
}

body.theme-green-soft {
    .theme-builder(@ThemeGreen, screen(@ThemeYellow, #111));
}

body.theme-violet {
    .theme-builder(@ThemeViolet, @ThemeRed);
}

body.theme-violet-soft {
    .theme-builder(@ThemeViolet, hardlight(@ThemeYellow, #bbb));
}

body.theme-magenta {
    .theme-builder(@ThemeMagenta, darken(@ThemeCyan, 10%), @white);
}

body.theme-magenta-soft {
    .theme-builder(@ThemeMagenta, screen(@ThemeCyan, #777));
}

body.theme-crimson {
    .theme-builder(@ThemeCrimson, screen(@ThemeLime, #222));
}

body.theme-crimson-soft {
    .theme-builder(@ThemeCrimson, screen(@ThemeLime, #777));
}

body.theme-amber {
    .theme-builder(@ThemeAmber, @ThemeCobalt);
}

body.theme-amber-soft {
    .theme-builder(@ThemeAmber, hardlight(@ThemeCobalt, #ddd));
}

body.theme-brown {
    .theme-builder(@ThemeBrown, @ThemeYellow);
}

body.theme-brown-soft {
    .theme-builder(@ThemeBrown, hardlight(@ThemeYellow, #bbb));
}

body.theme-steel {
    .theme-builder(@ThemeSteel, @ThemeRed);
}

body.theme-steel-soft {
    .theme-builder(@ThemeSteel, hardlight(@ThemeYellow, #bbb));
}