cluster-dashboard/frontend/styles/main.scss

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;

    width: 100%;
    min-height: 100vh;

    font-family: 'Open Sans', 'Segoe UI', 'Helvetica', 'Arial', sans-serif;
    font-size: 16px;

    color: #284a36;
}

::selection {
    background-color: #496152;
    color: #fff;
}

img {
    display: block;
}

//
// Components
//

//
// Structure
//

body {
    display: grid;
    grid-template-columns: auto 1fr;

    .sidebar {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background-color: #fff;

        padding: 16px;

        .top,
        .bottom {
            display: flex;
            flex-direction: column;

            gap: 8px;

            .logo {
                font-size: 6px;

                padding: 16px;

                font-family: 'Ubuntu Mono', monospace;
                font-weight: 700;

                display: grid;
                place-content: center;

                user-select: all;
            }

            .item {
                display: flex;
                gap: 8px;
                padding: 8px 16px;
                align-items: center;
                border-radius: 12px;

                user-select: none;
                cursor: pointer;

                .icon {
                    display: grid;
                    place-content: center;

                    color: #284a36;

                    img {
                        width: 18px;
                        height: 18px;
                    }
                }

                .label {
                    color: #496152;
                    a {
                        color: inherit;
                        text-decoration: none;
                    }
                }

                &:hover {
                    background-color: #e8ede9;
                }

                &.link {
                    padding: 0 16px;

                    .label {
                        display: flex;
                        flex-grow: 1;

                        a {
                            display: flex;
                            flex-grow: 1;

                            padding: 8px 0;
                        }
                    }
                }
            }
        }
    }

    .main {
        background-color: rgb(245, 246, 250);
        display: grid;
        grid-template-columns: 1fr 1fr;

        padding: 32px;
        gap: 32px;

        height: 100vh;

        overflow-y: auto;

        .card {
            border-radius: 32px;
            padding: 24px 32px;
            background-color: #fff;
            display: grid;
            grid-template-rows: auto 1fr;
            gap: 8px;

            .label {
                font-weight: 600;
            }

            .graph {
                min-height: 300px;

                .d3-plot {
                    display: flex;
                    width: 100%;
                    height: 100%;
                }
            }
        }

        @media screen and (max-width: 1100px) {
            grid-template-columns: 1fr;
        }
    }
}

//
// Media Queries
//