knot-toolbox/frontend/styles/main.scss

*,
*::before,
*::after {
    // Good practice
    box-sizing: border-box;

    // For body and headings as typography should be done by hand anyway
    margin: 0;

    // For controls
    font-family: inherit;
    appearance: none;
}

html,
body {
    display: contents;

    font-family: 'Inter', sans-serif;
    font-weight: 400;

    font-size: 16px;

    background: #f4f4f4;
    color: #333;
}

// Headings

$base-font-size: 15px;
$heading-scale: 1.33;

@function pow($number, $exponent) {
    $value: 1;

    @if $exponent > 0 {
        @for $i from 1 through $exponent {
            $value: $value * $number;
        }
    }

    @return $value;
}

@for $i from 1 through 5 {
    h#{$i} {
        font-family: 'Inter', sans-serif;
        font-weight: 500;

        $factor: pow($heading-scale, 5 - $i);
        font-size: $base-font-size * $factor;
    }
}

// Controls

button {
    border: 1px solid #d0d0d0;
    background: #fff;

    font-size: 15px;

    border-radius: 6px;

    cursor: pointer;

    &.flat {
        border-color: transparent;
        background-color: transparent;

        &:hover {
            background: #d0d0d0;
        }
    }

    &.icon {
        aspect-ratio: 1;
        display: grid;
        place-content: center;
    }

    display: flex;
    align-items: center;
    gap: 0.25rem;

    height: 2rem;

    .material-symbols-outlined {
        font-size: 20px;
    }

    &.small {
        height: 1.5rem;

        .material-symbols-outlined {
            font-size: 16px;
        }
    }
}

.compound-select {
    display: flex;
    flex-direction: row;
    gap: 0.25rem;

    button.selected {
        background: #f0f0f0;
        border-color: #888;
    }
}

// Structure

main {
    user-select: none;

    width: 100vw;
    height: 100vh;

    display: grid;
    grid-template-columns: 10rem 1fr;
    grid-template-rows: auto 1fr;

    grid-template-areas:
        'toolbar toolbar'
        'outline work-area';

    .toolbar {
        grid-area: toolbar;

        background: #fff;
        border-bottom: 1px solid #d0d0d0;

        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1rem;

        padding: 0.5rem 1rem;

        .logo {
            display: flex;
            align-items: center;
            gap: 0.5rem;

            font-size: 22px;
            font-weight: 500;

            padding-right: 0.5rem;
        }

        .group {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;

            .label {
                font-size: 13px;
                color: #333;
                font-weight: 300;
            }
            .content {
                display: flex;
                flex-direction: row;
                gap: 0.25rem;
            }
        }
    }

    .outline {
        grid-area: outline;

        padding: 0.5rem;

        display: flex;
        flex-direction: column;
        gap: 0.25rem;

        background: #fff;
        border-right: 1px solid #d0d0d0;

        .layer {
            padding: 0 0 0 0.25rem;

            height: 1.5rem;

            border-radius: 6px;

            display: flex;
            align-items: center;
            justify-content: space-between;

            .name {
                display: flex;
                align-items: center;
                gap: 0.25rem;

                font-size: 15px;

                .material-symbols-outlined {
                    font-size: 18px;
                }
            }

            .buttons {
                display: flex;
                align-items: center;
                flex-direction: row;
                gap: 0.25rem;
            }

            &:not(:hover) {
                .buttons {
                    display: none;
                }
            }

            &:hover {
                background: #f0f0f0;
            }
        }
    }

    .work-area {
        grid-area: work-area;

        position: relative;

        canvas {
            position: absolute;
            width: 100%;
            height: 100%;

            @media (prefers-color-scheme: dark) {
                filter: invert(100%);
            }
        }
    }
}