crates/client/src/style/styles.less

body {
    padding-top: calc(var(--spacing)/2);
    overflow: hidden;
}

#mcrates {
    padding: 0 var(--spacing-double) var(--spacing) var(--spacing-double);
    display: grid;

    grid-template-areas:
        "header header"
        "main   main"
        "footer footer";

    height: 100vh;
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: min-content 1fr min-content;
}

.landing {
    display: grid;

    overflow: scroll;

    grid-template-columns: 1fr 2fr;
    grid-gap: calc(var(--spacing-double) * 2);
    grid-template-areas:
        "login swirl"
        "login words";

    .login {
        grid-area: login;
        button {
            width: 100%;
        }
    }

    .swirl {
        grid-area: swirl;
        height: 15rem;
    }

    .words {
        grid-area: words;
        text-align: center;
    }
}

.info {
    display: grid;

    overflow: hidden;

    grid-template-areas:
        "words swirl"
        "words contact";

    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content 1fr;

    section {
        margin-bottom: var(--spacing);
    }

    .contact {
        grid-area: contact;
        text-align: center;
        overflow: scroll;
    }

    .words {
        grid-area: words;
        overflow: scroll;
    }

    .swirl {
        grid-area: swirl;
        height: 15rem;
    }
}

article {
    background-color: var(--background-1);

    button {
        border-color: var(--background-2);
    }
}

.search {
    display: grid;
    grid-template-columns: 1fr 2fr;

    overflow: hidden;

    .results {
        display: grid;
        padding-left: var(--spacing);
        grid-gap: var(--spacing);

        article {
            display: grid;
            padding: var(--spacing);
            grid-template-columns: 1fr 4fr min-content;
        }

        overflow: scroll;
    }

    button {
        margin-right: var(--spacing);
        background: var(--background-2);
        border-color: var(--background-1);

        &.added {
            background: var(--color-green);
            cursor: auto;
        }
    }
}

.list {
    display: grid;
    grid-template-columns:
        1fr 1fr 1fr;

    grid-gap: var(--spacing);
    overflow: scroll;

    article {
        display: grid;

        grid-template-areas:
            "title img"
            "details details"
            "remove remove";

        button {
            margin-top: var(--spacing-half);
            grid-area: remove
        }

        .details {
            grid-area: details;
        }

        padding: var(--spacing);

        img {
            justify-self: end;
        }
    }
}

form {
    margin-bottom: var(--spacing);

    label, input {
        display: block;
    }

    input, button {
        width: 100%;
    }

    input {
        padding: var(--spacing-half);
        margin-bottom: var(--spacing);
    }

    label {
        font-family: var(--secondary-font-family);
        font-size: var(--small-font-size);
        text-transform: uppercase;
        margin-bottom: var(--spacing-half);
    }

}

header {
    grid-area: header;

    display: grid;
    grid-template-columns: 1fr 1fr min-content;

    border-bottom: var(--base-border);
    padding-bottom: var(--spacing-half);
    margin-bottom: var(--spacing-half);

    a {
        font-size: var(--small-font-size);
        margin-right: var(--spacing);
    }

    a {
        white-space: nowrap;
    }
}

main {
    grid-area: main;

    display: grid;
    grid-template-areas:
        "nav content";

    grid-template-columns:
        1fr 1fr;

    column-gap: var(--spacing);

    overflow: hidden;

    nav {
        // duck scrollbars
        padding-right: var(--spacing-half);

        grid-area: nav;

        div {
            display: grid;
            grid-template-columns:
                1fr min-content min-content;

            column-gap: var(--spacing-half);

            a {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        overflow: scroll;
    }

    .offers {
        grid-area: content;
        overflow: scroll;
    }
}

.acp {
    overflow: scroll;

    .bundles {
        flex-flow: row;

        .bundle {
            margin-bottom: var(--spacing-double);

            section {
                margin-bottom: var(--spacing);
            }

            .items {
                display: grid;
                grid-template-columns: repeat(5, 1fr);

                div {
                    margin-right: var(--spacing);
                    margin-bottom: var(--spacing);

                    display: grid;

                    &.bold {
                        font-weight: bold;
                        background: var(--background-2);
                    }
                }
            }
        }
    }
}

.offers {
    display: grid;
    // grid-template-columns: 1fr 1fr;
    grid-gap: var(--spacing);

    .offer {
        display: grid;
        grid-template-columns: 1fr min-content;
        grid-template-rows: min-content min-content;
        grid-template-areas:
            "details img"
            "lines lines";

        padding: var(--spacing);
        background: var(--background-1);

        .details {
            font-size: var(--small-font-size);
        }

        .status {
            margin-top: var(--spacing-half);
        }

        section {
            grid-area: details;
        }

        img {
            grid-area: img;
            justify-self: end;
            margin-left: var(--spacing-half);
        }

        .lines {
            grid-area: lines;
            display: flex;
            flex-wrap: wrap;
            column-gap: var(--spacing-half);

            button {
                margin-top: var(--spacing-half);
                border-color: var(--background-2);

                &.accepted {
                    background: var(--color-accepted);
                }

                &.confirmed {
                    cursor: auto;
                    background: var(--color-confirmed);
                }

                &.neg {
                    margin-left: var(--spacing-half);
                }
            }
        }
    }
}

.number {
    font-family: var(--secondary-font-family);
    text-transform: uppercase;
}

.swirl {
    background-image: url("./../assets/swirl.fix.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    margin-bottom: var(--spacing);
}

@media (max-width:900px)  {
    .landing {
        grid-template-columns: 1fr;
        grid-template-areas:
            "swirl"
            "login"
            "words";
    }

    .list {
        grid-template-columns: 1fr;
    }

    .search {
        grid-template-columns: 1fr;
    }

    .offers {
        grid-template-columns: 1fr;
    }

    .info {
        grid-template-columns: 1fr;
        // is necessary for some reason
        grid-template-areas:
            "swirl"
            "contact"
            "words";
    }

    #mcrates {
        padding: 0 var(--spacing) 0 var(--spacing);
    }

    main {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 3fr;
        grid-gap: var(--spacing-half);
        grid-template-areas:
            "nav"
            "content";
    }
}

@media (max-width:1200px) {
    img {
        width: 5rem;
    }
}


// ------------
// toasts

.iziToast {
    border-radius: 0;
    border-color: var(--base-border-color);

    .iziToast-body {
        font-family: var(--base-font-family);
        font-size: var(--base-font-size);
    }

    .iziToast-title {
        font-family: var(--secondary-font-family);
        text-transform: uppercase;
    }
}