BiomeScout/dist/index.css

#grid {
    height: 100vh;
    display: grid;
    grid-auto-rows: 1fr;
}
.gridCell {
    --base-margin: 6px;
    --border-width: 1px;

    --open-margin: calc(0px - (var(--base-margin) + var(--border-width)));
    --open-padding: calc((var(--base-margin) + var(--border-width)) * 2);

    min-height: 1lh;
    border: var(--border-width) solid;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: var(--base-margin);
    transition: 
        margin 0.2s ease-out,
        padding 0.2s ease-out
    ;
    &.hover {
        --hover-margin: 2px;

        --open-hover-margin: calc(0px - (var(--hover-margin) + var(--border-width)));
        --open-hover-padding: calc((var(--hover-margin) + var(--border-width)) * 2);
        margin: var(--hover-margin);
    }
    &.open-b {
        border-bottom: none;
        margin-bottom: var(--open-margin);
        padding-bottom: var(--open-padding);
        &.hover {
        margin-bottom: var(--open-hover-margin);
        padding-bottom: var(--open-hover-padding);
        }
    }
    &.open-t {
        border-top: none;
        margin-top: var(--open-margin);
        padding-top: var(--open-padding);
        &.hover {
        margin-top: var(--open-hover-margin);
        padding-top: var(--open-hover-padding);
        }
    }
    &.open-r {
        border-right: none;
        margin-right: var(--open-margin);
        padding-right: var(--open-padding);
        &.hover {
        margin-right: var(--open-hover-margin);
        padding-right: var(--open-hover-padding);
        }
    }
    &.open-l {
        border-left: none;
        margin-left: var(--open-margin);
        padding-left: var(--open-padding);
        &.hover {
        margin-left: var(--open-hover-margin);
        padding-left: var(--open-hover-padding);
        }
    }
    & > .gridCellContent {
        flex-grow: 1;
    }
    & > .gridCellTitle {
        margin: 0;
        text-align: center;
    }
}

.pixelIcon {
    image-rendering: pixelated;
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.noisePanel {
    display: flex;
    .noiseBar {
        display: flex;
        flex-direction: column;
        height: 90vh;
        margin: 2px;
        & .axesButtons {
            display: flex;
            flex-direction: column;
            height: 100%;
            & button {
                font-size: 7pt;
                padding: 0;
                &.selected {
                    background-color: lightgray;
                }
            }
        }
        & .selectButtons {
            & button {
                width: 50%
            }
        }
    }
}

#sidebar {
    display: flex;
}