nc-planner/style.css

* {
    box-sizing: border-box;
}

:root {
    font-family: sans-serif;
    max-height: 100svh;
    height: 100%;
    overflow: hidden;
}

:root {
    --scale-factor: 2;
    --default-size: 16px;

    --dark-bg: #990099;
    --menu-border-color: #666;
    --resize-handle-color: #666;
    --resize-handle-width: 3px;
}

[data-state].hidden {
    display: none;
}

.list {
    display: flex;
    flex-wrap: wrap;
}
.list .hidden {
    display: none;
}
.grid {
    display: grid;
    grid-template-columns: repeat(var(--width), calc(var(--scale-factor) * var(--default-size)));
}

.m1 {
    margin: 0.1em;
}
.m2 {
    margin: 0.5em;
}

body {
    display: grid;
    grid-template-columns: var(--left-menu-size, 15%) 1fr var(--right-menu-size, 10%);
    grid-template-rows: 28px 1fr var(--bottom-menu-size, 15%);
    height: 100%;
    margin: 0;
}
#top-menu {
    grid-column: 1 / -1;
    grid-row: 1;

    background-color: var(--dark-bg);
}
#left-menu {
    grid-column: 1;
    grid-row: 2;
    border-right: 1px solid var(--menu-border-color)
}
main {
    grid-column: 2;
    grid-row: 2;
    overflow: auto;
}
#right-menu {
    grid-column: 3;
    grid-row: 2;
    border-left: 1px solid var(--menu-border-color)
}
#bottom-menu {
    grid-column: 1 / -1;
    grid-row: 3;
    border-top: 1px solid var(--menu-border-color)
}

#left-menu, #right-menu, #bottom-menu {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
[data-resize] {
    position: absolute;
    z-index: 1;
    content: "";
}
#left-menu [data-resize], #right-menu [data-resize] {
    border-left: 1px solid var(--resize-handle-color);
    border-right: 1px solid var(--resize-handle-color);
    margin: auto;
    top: 0;
    bottom: 0;
    width: calc(var(--resize-handle-width) * 2 - 1px);
    height: 1em;
}
#left-menu [data-resize] {
    cursor: w-resize;
    right: calc(var(--resize-handle-width) * -1);
}
#right-menu [data-resize] {
    cursor: e-resize;
    left: calc(var(--resize-handle-width) * -1);
}
#bottom-menu [data-resize] {
    border-top: 1px solid var(--resize-handle-color);
    border-bottom: 1px solid var(--resize-handle-color);
    cursor: s-resize;
    margin: auto;
    left: 0;
    right: 0;
    top: calc(var(--resize-handle-width) * -1);
    width: 1em;
    height: calc(var(--resize-handle-width) * 2 - 1px);
}
body[data-resizing] {
    user-select: none;
}
body[data-resizing="left-menu"] {
    cursor: w-resize;
}
body[data-resizing="right-menu"] {
    cursor: e-resize;
}
body[data-resizing="bottom-menu"] {
    cursor: s-resize;
}

section {
    overflow: auto;
    padding: 0.5em;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
    width: 100%;
}

.atlas-texture {
    image-rendering: -moz-crisp-edges; /* Firefox fallback */
    image-rendering: pixelated;        /* Modern browsers */

    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;

    background-size: calc(var(--scale-factor) * var(--atlas-resolution))
                     calc(var(--scale-factor) * var(--atlas-resolution));

    width: calc(var(--scale-factor) * var(--size-x));
    height: calc(var(--scale-factor) * var(--size-y));

    background-position-x: calc(var(--scale-factor) * var(--raw-x) * -1);
    background-position-y: calc(var(--scale-factor) * var(--raw-y) * -1);

    opacity: var(--atlas-opacity, 1);
}
.atlas-air {
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;

    width: calc(var(--scale-factor) * var(--size-x, var(--default-size)));
    height: calc(var(--scale-factor) * var(--size-y, var(--default-size)));
    outline: calc(var(--scale-factor) * 0.5px) solid var(--cell-empty-outline-color, #ccc);

    opacity: var(--atlas-opacity, 1);
}
.atlas-air:hover, .atlas-texture:hover {
    outline: calc(var(--scale-factor) * 1px) solid var(--cell-hover-outline-color, #8888);
}
[data-preview], [data-preview-remove] {
    --atlas-opacity: var(--atlas-preview-opacity, 0.5);
}
[data-highlight] {
    position: relative;
}
[data-highlight] .atlas-texture:after, [data-highlight] .atlas-air:after {
    content: '';
    position: absolute;
}
[data-highlight-distance="1"] {
    --highlight-color: var(--highlight-near-color, #4848);
}
[data-highlight='x'] .atlas-texture:after, [data-highlight='x'] .atlas-air:after {
    inset:
            calc(var(--scale-factor) * var(--size-y, var(--default-size)) * 0.4)
            0
            calc(var(--scale-factor) * var(--size-y, var(--default-size)) * 0.4)
            0;
    background-color: var(--highlight-color, #f808);
}
[data-highlight='y'] .atlas-texture:after, [data-highlight='y'] .atlas-air:after {
    inset:
            0
            calc(var(--scale-factor) * var(--size-x, var(--default-size)) * 0.4)
            0
            calc(var(--scale-factor) * var(--size-x, var(--default-size)) * 0.4);
    background-color: var(--highlight-color, #f808);
}
[data-highlight='z'] .atlas-texture:after, [data-highlight='z'] .atlas-air:after {
    inset:
            calc(var(--scale-factor) * var(--size-y, var(--default-size)) * 0.4)
            calc(var(--scale-factor) * var(--size-x, var(--default-size)) * 0.4)
            calc(var(--scale-factor) * var(--size-y, var(--default-size)) * 0.4)
            calc(var(--scale-factor) * var(--size-x, var(--default-size)) * 0.4);
    background-color: var(--highlight-color, #f808);
}

#block-list [data-active] {
    outline: calc(var(--scale-factor) * 1px) solid var(--block-active-outline-color, #000);
}
#block-list [data-index]:hover:not([data-active]) {
    outline: calc(var(--scale-factor) * 1px) solid var(--block-hover-outline-color, #6666);
}

[data-tooltip] {
    position: relative;
}
[data-tooltip] > .tooltip {
    position: fixed;
    z-index: 10;
    background: var(--tooltip-background, #222d);
    color: var(--tooltip-foreground, #fff);
    font-size: var(--tooltip-font-size, .8em);
    /*border-radius: var(--tooltip-border-radius, 0.25em);*/
    padding: var(--tooltip-padding, 0.25em);
    border: var(--tooltip-border-size, 1px) solid var(--tooltip-border-color, #fff);
    /*max-width: var(--tooltip-width, 200px);*/
}