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;
    --dark-bg-text: #fffe;
    --menu-border-color: #666;
    --resize-handle-color: #666;
    --resize-handle-width: 3px;

    --recipe-select-border-color: #888a;
}

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

.bold {
    font-weight: bold;
}
.italics {
    font-style: italic;
}

.list {
    display: flex;
    flex-wrap: wrap;
}
.list .hidden {
    display: none;
}
.grid {
    display: grid;
    grid-template-columns: repeat(var(--width-override, 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: min-content 1fr var(--bottom-menu-size, 15%) min-content;
    height: 100%;
    margin: 0;
}
#top-menu {
    grid-column: 1 / -1;
    grid-row: 1;

    background-color: var(--dark-bg);
    color: var(--dark-bg-text);
}
#left-menu {
    grid-column: 1;
    grid-row: 2;
    border-right: 1px solid var(--menu-border-color);
}
#bottom-menu {
    grid-column: 1;
    grid-row: 3;
    border-top: 1px solid var(--menu-border-color);
    border-right: 1px solid var(--menu-border-color);
}
main {
    grid-column: 2;
    grid-row: 2 / 4;
    overflow: auto;
}
#right-menu {
    grid-column: 3;
    grid-row: 2 / 4;
    border-left: 1px solid var(--menu-border-color);
}
#bottom-menu {
    grid-column: 1;
    grid-row: 3;
    border-top: 1px solid var(--menu-border-color);
}
body > footer {
    grid-column: 1 / -1;
    grid-row: 4;
    border-top: 1px solid var(--menu-border-color);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 0.25em;
}

.status-bar {
    border-bottom: 1px solid var(--status-bar-color, #4444);
}
.status-bar > :nth-child(3) {
    display: flex;
    justify-content: flex-end;
}

#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(--atlas-resolution) * var(--atlas-scale, 1) * var(--scale-factor));

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

    background-position-x: calc(var(--raw-x) * var(--atlas-scale, 1) * var(--scale-factor) * -1);
    background-position-y: calc(var(--raw-y) * var(--atlas-scale, 1) * var(--scale-factor) * -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)));

    opacity: var(--atlas-opacity, 1);
}
.atlas-air:hover, .atlas-texture:hover {
    outline: calc(var(--scale-factor) * 1px) solid var(--cell-hover-outline-color, #8888);
    outline-offset: calc(var(--scale-factor) * -1px);
}
[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:
        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);
}
[data-highlight='z'] .atlas-texture:after, [data-highlight='z'] .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-casing="hide"] #planner .grid {
    --width-override: calc(var(--width) - 2);
}
[data-casing="hide"] [data-casing] {
    display: none;
}

[data-recipe-overlay="hide"] .planner--overlay[data-overlay="block_recipe"] {
    display: none;
}

[data-selected] {
    outline: calc(var(--scale-factor) * 1px) dashed var(--cell-selected-outline, #f80);
    outline-offset: calc(var(--scale-factor) * -1px);
}
[data-selected] .atlas-air {
    outline: none;
}

.planner--cell {
    position: relative;
}
.planner--cell > .planner--overlay {
    position: absolute;
    inset: 0;
    opacity: var(--overlay-opacity, 0.8);
}

.planner--resize {
    --resize-width: var(--width);
    --resize-height: var(--height);
    --resize-offset: 2;
    display: grid;
    grid-template-columns: repeat(calc(var(--resize-width) * 2 + 4), calc(var(--scale-factor) * var(--default-size) / 2));
    grid-template-rows: repeat(calc(var(--resize-height) * 2 + 4), calc(var(--scale-factor) * var(--default-size) / 2));
    margin: 0.5rem;
}
[data-casing="hide"] .planner--resize {
    --resize-offset: 0;
    grid-template-columns: repeat(calc(var(--resize-width) * 2), calc(var(--scale-factor) * var(--default-size) / 2));
    grid-template-rows: repeat(calc(var(--resize-height) * 2), calc(var(--scale-factor) * var(--default-size) / 2));
}
.planner--resize--remove-layer {
    grid-column: 1;
    grid-row: 1;
}
.planner--resize--add-x {
    grid-column: calc(var(--x) * 2 + 0 + var(--resize-offset)) / calc(var(--x) * 2 + 2 + var(--resize-offset));
}
.planner--resize--remove-x {
    grid-column: calc(var(--x) * 2 + 1 + var(--resize-offset)) / calc(var(--x) * 2 + 3 + var(--resize-offset));
}
.planner--resize--add-x.planner--resize--top-left {
    grid-row: 1;
}
.planner--resize--remove-x.planner--resize--top-left {
    grid-row: 2;
}
.planner--resize--add-x.planner--resize--bottom-right {
    grid-row: calc(var(--resize-height) * 2 - 0 + var(--resize-offset) * 2);
}
.planner--resize--remove-x.planner--resize--bottom-right {
    grid-row: calc(var(--resize-height) * 2 - 1 + var(--resize-offset) * 2);
}
.planner--resize--add-z {
    grid-row: calc(var(--z) * 2 + 0 + var(--resize-offset)) / calc(var(--z) * 2 + 2 + var(--resize-offset));
}
.planner--resize--remove-z {
    grid-row: calc(var(--z) * 2 + 1 + var(--resize-offset)) / calc(var(--z) * 2 + 3 + var(--resize-offset));
}
.planner--resize--add-z.planner--resize--top-left {
    grid-column: 1;
}
.planner--resize--remove-z.planner--resize--top-left {
    grid-column: 2;
}
.planner--resize--add-z.planner--resize--bottom-right {
    grid-column: calc(var(--resize-width) * 2 - 0 + var(--resize-offset) * 2);
}
.planner--resize--remove-z.planner--resize--bottom-right {
    grid-column: calc(var(--resize-width) * 2 - 1 + var(--resize-offset) * 2);
}
.planner--resize > .grid {
    grid-column: 3 / calc(var(--resize-width) * 2 - 1);
    grid-row: 3 / calc(var(--resize-height) * 2 - 1);
    margin: 0;
}
.planner--resize--add-layer {
    width: calc(var(--scale-factor) * var(--default-size));
    margin: 0.5rem;
}
.planner--resize--add-layer, .planner--resize--add-x, .planner--resize--add-z,
        .planner--resize--remove-layer, .planner--resize--remove-x, .planner--resize--remove-z {
    display: flex;
    justify-content: center;
    align-items: center;

    cursor: pointer;
    user-select: none;
}
.planner--resize--add-layer, .planner--resize--add-x, .planner--resize--add-z {
    background: var(--resize-add-bg, #4f88);
}
.planner--resize--add-layer:hover, .planner--resize--add-x:hover, .planner--resize--add-z:hover {
    background: var(--resize-add-bg-hover, #4f8);
}
.planner--resize--remove-layer, .planner--resize--remove-x, .planner--resize--remove-z {
    background: var(--resize-remove-bg, #f888);
}
.planner--resize--remove-layer:hover, .planner--resize--remove-x:hover, .planner--resize--remove-z:hover {
    background: var(--resize-remove-bg-hover, #f88);
}
.planner--resize--add-x, .planner--resize--remove-x {
    margin: 0 0.125rem;
}
.planner--resize--add-z, .planner--resize--remove-z {
    margin: 0.125em 0;
}
.planner--resize--highlight {
    z-index: 2;
}
.planner--resize--highlight__add-x {
    background: var(--resize-add-bg-highlight, #4f88);
    margin: 0 25%;
    grid-row: 3 / -3;
    grid-column: calc(var(--x) * 2 + 0 + var(--resize-offset)) / calc(var(--x) * 2 + 2 + var(--resize-offset));
}
.planner--resize--highlight__remove-x {
    background: var(--resize-remove-bg-highlight, #f888);
    grid-row: 3 / -3;
    grid-column: calc(var(--x) * 2 + 1 + var(--resize-offset)) / calc(var(--x) * 2 + 3 + var(--resize-offset));
}
.planner--resize--highlight__add-z {
    background: var(--resize-add-bg-highlight, #4f88);
    /*margin: 25% 0;*/
    margin-top: calc(var(--scale-factor) * var(--default-size) / 4);
    height: 50%;
    grid-row: calc(var(--z) * 2 + 0 + var(--resize-offset)) / calc(var(--z) * 2 + 2 + var(--resize-offset));
    grid-column: 3 / -3;
}
.planner--resize--highlight__remove-z {
    background: var(--resize-remove-bg-highlight, #f888);
    grid-row: calc(var(--z) * 2 + 1 + var(--resize-offset)) / calc(var(--z) * 2 + 3 + var(--resize-offset));
    grid-column: 3 / -3;
}
.planner--resize--highlight__remove-layer {
    background: var(--resize-remove-bg-highlight, #f888);
    grid-row: 3 / -3;
    grid-column: 3 / -3;
}

#planner .atlas-air {
    outline: calc(var(--scale-factor) * 0.5px) solid var(--cell-empty-outline-color, #ccc);
    outline-offset: calc(var(--scale-factor) * -0.5px);
}

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

.recipe-selector .recipe {
    /*background: red;*/
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: .25em;
    /*--scale-factor: 1.5;*/
    cursor: pointer;
}
.recipe-selector .recipe > [data-text] {
    flex-grow: 1;
}
.recipe-selector .recipe--selected {
    border-radius: .25em;
    border: 1px solid var(--recipe-select-border-color, #444);
}
.recipe-selector .recipe--selected::after {
    padding-right: .25em;
    content: '▼';
}
.recipe-selector > div:not(.selecting) > input, .recipe-selector > div:not(.selecting) > .select {
    display: none;
}
.recipe-selector > div.selecting .recipe--selected {
    display: none;
}
.recipe-selector > div {
    position: relative;
}
.recipe-selector > div > [data-input="recipe:filter"] {
    border: 1px solid var(--recipe-select-border-color, #444);
}
.recipe-selector > div > .select {
    position: static;
    left: 0;
    right: 0;
    max-height: calc(var(--scale-factor) * var(--default-size) * var(--recipe-select-item-count, 8));
    overflow: auto;
    z-index: 10;
    border: 1px solid var(--recipe-select-border-color, #444);
    border-top: none;
    border-bottom-left-radius: .25em;
    border-bottom-right-radius: .25em;
}
.recipe-selector .select > .recipe:hover {
    background-color: var(--recipe-select-hover-bg, #4444);
}
.recipe-selector .select > .hidden {
    display: none;
}

[data-tooltip] {
    position: relative;
    user-select: none;
}
[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);*/
    pointer-events: none;
}
.tooltip > .tooltip--item {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: .25em;
    --scale-factor: 1;
}

.menu-bar {
    user-select: none;
    cursor: default;
}
.menu-bar > [data-section] {
    display: inline;
}
.menu-bar [data-section]:not(.active) {
    display: none;
}
.menu-bar [data-section] {
    position: fixed;
    background: var(--menu-bg, #222);
    color: var(--menu-fg, #fffe);
    display: flex;
    flex-direction: column;
    z-index: 100;
    box-shadow: var(--menu-shadow, 0 2px 4px #0002);
}
.menu-bar button {
    all: initial;
    font: inherit;
    color: inherit;
    padding: var(--menu-item-padding, 0.25em);
    font-size: var(--menu-item-font-size, 0.8em);
    cursor: default;
}
.menu-bar button:disabled {
    color: var(--menu-item-disabled-color, #aaae);
}
.menu-bar [data-section] button.active, .menu-bar [data-section] button:hover:not(:disabled) {
    background: var(--menu-bg-hover, #444);
    color: var(--menu-fg-hover, #fffe);
}
.menu-bar [data-section] button[data-for-section]::after {
    content: '>';
    float: right;
    margin-left: 0.5em;
}
.menu-bar .alt-key {
    text-decoration: underline;
}
.menu-bar [data-section]:has(> [data-toggle]) > button {
    display: grid;
    grid-template-columns: 1.25em 1fr;
}
.menu-bar [data-section]:has(> [data-toggle]) > button::before {
    content: '';
    inline-size: 1.25em;
    text-align: center;
}
.menu-bar button[data-toggle][data-toggled="false"]::before {
    content: '☐';
}
.menu-bar button[data-toggle][data-toggled="true"]::before {
    content: '☑';
}

.dialog.hidden {
    display: none;
}
.dialog {
    position: fixed;
    inset: 0;
    background: var(--dialog-backdrop, #0008);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    padding: var(--dialog-margin, 1em);
}
.dialog > section {
    z-index: 11;
    padding: var(--dialog-padding, 1em);
    background: var(--dialog-background, #fff);
    color: var(--dialog-foreground, #000);
    border-radius: var(--dialog-border-radius, .25em);
    box-shadow: var(--dialog-box-shaodw, 0 4px 8px #0002);
    max-width: 100%;
    max-height: 100%;
}
.dialog > section > header {
    font-size: var(--dialog-header-size, 1.25em);
}
.dialog > section > main {
    padding: 1em 0;
}
.dialog > section > footer {
    display: flex;
    gap: 0.5em;
    flex-direction: row;
    justify-content: end;
}
.dialog > section > .list-choice {
    display: flex;
    flex-direction: column;
    gap: .25em;
}
.dialog > section > .list-choice > * {
    font-size: 1em;
}